elment-ui+七牛上传文件

版权声明：本BLOG上原创文章未经本人许可，不得用于商业用途及传统媒体。网络媒体转载请注明出处，否则属于侵权行为。 https://blog.csdn.net/liaoxuewu/article/details/82218947

七牛官网（https://developer.qiniu.com/kodo/sdk/1283/javascript）也介绍了具体的使用方法，现在我做的是直接用的elment-ui上传插件。大部分逻辑都在后台处理，前台只需调用接口即可。接口有三个，分别是获取七牛token的tokenUrl，上传文件时调用的uploadUrl，这是可以在七牛官网上找到的，看自己在中国的哪个区对应着什么地址，北京这边的是华北地区，地址为http://up-z1.qiniup.com/，还有存储文件的接口storageDomain

1.调取获取七牛token，七牛token是上传文件的凭证，获取之后添加到上传文件的post数据对象里。

this.$http.post(tokenUrl)
    .then(res =>{
    this.postQiNiuData.token = res.uploadToken; 
        })
        .catch(function (error) {
            console.log(error);
        });

2.页面结构代码

<el-upload
    :action="uploadUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :file-list="files"
    :data="postQiNiuData"
    :auto-upload="true"
    :limit="5"
    :on-exceed="handleExceed">
    <el-button slot="trigger" size="small" type="primary" :disabled="this.allDisabled">选取文件</el-button>
</el-upload>

3.初始化数据

data() {
    return {
        files: [], // 文件
        uploadToken: '', // 上传文件 token,
        postQiNiuData: {},
    }
}

4.上传文件的方法

（1）上传文件。在上传文件的时候可以对上传的文件名进行修改，定义文件的路径，还可以限制上传文件的数量、类型等。如果不做任何修改返回的结构：

{
    hash:"FgOcdoAagVKYA593bXLC4VjGH531"
    key:"FgOcdoAagVKYA593bXLC4VjGH531"
}

修改之后的结构：

{
    hash:"FqDpAz--qCwXHMyBTV8pQMvZeDn4"
    key:"1535599897264/网址.txt"
}

这就是我们想要的结果，修改的文件名（包含自定义路径）会一起存储到服务器上。

handleChange(file, fileList) {
    let timestamp = (new Date()).valueOf(); //时间戳

    this.postQiNiuData.key = timestamp + '/' + file.name;
    this.fileList = fileList.slice(-5);
},

（2）上传文件成功调用函数。上传文件成功后会返回三个参数，其中response中会携带一个key，这个key就是你修改后的文件名。

handleSuccess(response, file, fileList) {
    let domain = storageDomain,
    key = response.key;
    file.url = storageDomain + key;
    this.allKey.push(key);
    let allFile = '';
    for(let k of this.allKey) {
    allFile += domain + k + ',';
    }
    allFile = allFile.substring(0, allFile.lastIndexOf(','));
    this.ruleForm.attachment = allFile;
},

（3）删除调用

handleRemove(file, fileList) {
    let allFile = '';
    for(let k of fileList) {
        allFile += k.url + ',';
    }
    allFile = allFile.substring(0, allFile.lastIndexOf(','));
    this.ruleForm.attachment = allFile;
},

（4）点击文件时调用。这个方法里主要是想点击文件文件的时候调用文件的路径的路径，直接预览或者下载。

handlePreview(file) {
    let key = file.response.key,
    domain = storageDomain;
    let fileAddress = domain + key;
},