<el-upload action="http://upload-z2.qiniup.com" :http-request="sliderRequest" :name="fileName" :before-upload="handleUpload" :drag="true" :on-success="handleAvatarSuccess" :on-error="handleError" :on-remove="handleRemove">
划个重点好吗，，这里的action用的是七牛上传的地址，，，是你创建的空间在哪个区，我的是华南所以是这个，，敲黑板，这里一定不是加域名那个地址，，我就是这个地方卡了很久，
我这里主要有作用的是http-request函数和before-upload，http-request是上传函数，覆盖默认的上传，因为想发现如果不给固定的key，那上传到七牛云之后文件类型发生了改变，所以我这里自定义了上传函数，，这个函数还是我百度的，至于具体是哪个链接记不清了。
sliderRequest(upload) {
// 文件上传自行处理上传
// 创建FormData对象 添加相关上传参数
const formData = new FormData()
// 文件对象
formData.append(‘file‘, upload.file)
// key 文件名处理，这样的话七牛会识别文件时什么类型
formData.append(‘key‘, upload.file.name)
// token
formData.append(‘token‘, this.postData.token)//这个postData,要在data数据里面进行定义的，，，我这里调接口使用的是vue的方式
// 上传文件
// onUploadProgress 查看axios文档 https://github.com/axios/axios
axios.post("http://upload-z2.qiniup.com", formData, {
onUploadProgress: (event) => {
// 监听上传进度
event.percent = event.loaded / event.total * 100
upload.onProgress(event)
}
}).then((response) => {
const res = response.data
if (res.code === 200) {
_this.handleAvatarSuccess();
}
}).catch((err) => {
// 调用组件上传失败方法
_this.handleError();
})
},
handleUpload(file) {
this.fileName = file.name;
this.addFormInfo.appendixUrl = "http://cdn.pinea.club/" + file.name;
this.updateFormInfo.appendixUrl = "http://cdn.pinea.club/" + file.name;
}
before-upload是上传时的函数，我这里时间添加到数据库的文件地址字段进行了修改，，这里的地址就是带域名的那个了，
下载就很简单，一个<a>标签链接一个文件地址即可搞定
<a v-if="contractInfo.appendixUrl!=null" class=‘download‘ :href=‘contractInfo.appendixUrl‘ download title="下载">下 载</a>
java后台的token接口：
@RequestMapping(value = "/getQiniuUpToken",produces = { "application/json;charset=UTF-8" })
@ResponseBody
public Response getQiniuUpToken() {
Response response = new Response();
try {
response.setResult(1);
response.setModel(auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1)));
log.info("getQiniuUpToken result:"+response.getResult());
} catch (Exception e) {
log.error("getQiniuUpToken 接口异常",e);
response.setResult(ResultCodeEnum.FAILURE.code);
response.setFailCode(ErrorCodeEnum.SYSTEM_EXCEPTION.errorCode);
response.setFailReason(ErrorCodeEnum.SYSTEM_EXCEPTION.errorDesc);
}
return response;
}
大家一起学习交流
