关于使用elementUI直传七牛云上传 and 下载踩坑

Posted 2020-12-01 yanyanp

这几天一直研究七牛云的，，由于本人对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;
}

大家一起学习交流