这几天一直研究七牛云的，，由于本人对elementUI框架的不熟悉，，踩了很多坑。

首先需要注册一个七牛云，最近快赶上双十一，所以七牛云新用户价格低廉500G*6个月只用了一分钱，废话不多说直接上代码。

先说说上传

前端使用elementUI的<el-upload>组件：

   <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">   <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> </div>  </el-upload>   划个重点好吗，，这里的action用的是七牛上传的地址，，，是你创建的空间在哪个区，我的是华南所以是这个，，敲黑板，这里一定不是加域名那个地址，，我就是这个地方卡了很久， 不得不说elementUI还是很强大的，所以以上组件绑定的函数直接看官方文档就好了， 我这里主要有作用的是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;
}

大家一起学习交流