IIS自己做的网站 无法访问数据库,114啦网址导航官网,网站制作上哪学校,个人网站有什么用本来打算做一个全部都是前端完成的资源上传到七牛云的demo#xff0c;但是需要获取token#xff0c;经历了九九八十一难#xff0c;最终还是选择放弃#xff0c;token从后端获取#xff08;springboot#xff09;。如果你们有前端直接能解决的麻烦记得私我哦#xff01;… 本来打算做一个全部都是前端完成的资源上传到七牛云的demo但是需要获取token经历了九九八十一难最终还是选择放弃token从后端获取springboot。如果你们有前端直接能解决的麻烦记得私我哦 效果展示 先看看文档 element ui https://element.eleme.cn/#/zh-CN/component/upload 七牛云https://developer.qiniu.com/kodo/1283/javascript
前端
首先安装七牛云的JS的sdk
npm install qiniu-js此处域名是指向你自己的七牛云域名目的是让照片回显。如何在七牛云中找到自己的域名请看下面。 3 .七牛云中找到自己的域名
templatedivel-upload classupload-demo actionhttps://upload.qiniup.com :on-removehandleRemove :file-listfileListlist-typepicture :http-requestcustomUpload acceptimage/jpeg,image/gif,image/pngel-button sizesmall typeprimary点击上传/el-buttondiv slottip classel-upload__tip只能上传jpg/png/gif文件且不超过2M/div/el-upload/div
/templatescript
//这里我下面会提供给其实就是一个后端接口后面会说怎么获取tonken的根据自己的需求来
import { qiniuTonken } from /js/qiniu_tokenexport default {name: photoList,data() {return {fileList: [],}},created() {this.getQiniuToken()},methods: {getQiniuToken() {qiniuTonken().then(res {this.yourQiniuUploadToken res.data.data})},//移除图片的处理handleRemove(file, fileList) {console.log(file, fileList);},beforeUpload(file) {// 在上传之前的逻辑可以做一些检查或者其他处理return true; // 返回true允许上传返回false阻止上传},customUpload(file) {const qiniu require(qiniu-js);// 自定义上传方法使用qiniu-js库进行上传const date new Date();const year date.getFullYear();const month date.getMonth() 1;const directory sm-frontend/ year / month /;const fileName file.file.name;const key directory fileName;const observable qiniu.upload(file.file, key, this.yourQiniuUploadToken);return observable.subscribe({complete(res) {// 上传完成时的回调const imageUrls http://***/ res.keyconst file_data {name: fileName,url: imageUrls,}_this.fileList.push(file_data)// 将成功状态标记添加到文件对象中。后续测试发现不加也可以哈哈哈。是之前直接使用this的原因。这里就不去掉了。const uploadedFileIndex _this.fileList.findIndex(file file.url imageUrls);//使用了 findIndex 方法来找到对应文件的索引然后将状态标记为成功。请尝试修改代码并重新测试上传功能if (uploadedFileIndex ! -1) {console.log(uploadedFileIndex)this.fileList[uploadedFileIndex].status success;}},next(res) {// 上传过程中的回调如果需要可以在这里处理上传进度等信息},error(err) {// 上传出错时的回调},});}}
}
/scriptJS
后端
技术springboot、maven…
引入maven !-- 七牛云 --dependencygroupIdcom.qiniu/groupIdartifactIdqiniu-java-sdk/artifactIdversion7.2.7/version/dependency编写controller代码
package com.admin.controller.admin.email;import com.common.util.QiniuUtil;
import com.system.constant.HTTPStatus;
import com.system.response.Result;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;/*** Classname QiniuController* Date 2023/8/8 13:32* Created ZFC*/
RestController
RequestMapping(/sys/qiniu)
public class QiniuController {GetMapping(/getUpToken)public Result getUpToken(RequestParam(value key, required false) String key){return new Result().setCode(HTTPStatus.SUCCESS).setData(QiniuUtil.getToken(key));}
}
util代码
import com.qiniu.util.Auth;
import lombok.extern.slf4j.Slf4j;Slf4j
public class QiniuUtil {public static String getToken(String key) {Auth auth Auth.create(***ACCESS_KEY***, ***SECRET_KEY***);return auth.uploadToken(***BUCKET***, key);}
}获取相关参数 ACCESS_KEY、SECRET_KEY BUCKET
