七牛云自定义文件上传（vue2）支持暂停续传

自定义文件上传，支持上传进度条(el-progress)，文件暂停、续传

一、直接上代码

特别注意，直接贴代码上传肯定会报错，需要后端提供七牛云token

1.html

代码如下（示例）：

<input id="uploadFile" ref="file" type="file" @change="uploadWithSDK"><input>
 <div :v-show="controlUploadBtn">
     <el-row>
         <el-col :span="20">
             <el-progress :percentage="uploadProgress" v-if="uploadProgress != 0 &&uploadProgress != 100"></el-progress>
         </el-col>
         <el-col :span="4">
             <el-button @click="controlUpload" v-if="uploadProgress != 0 &&uploadProgress != 100">{{uploadStatus?'暂停上传':'继续上传'}}</el-button>
         </el-col>
     </el-row>
 </div>


data() {
  return {
      controlUploadBtn: true,
      subscription: '',
      uploadProgress: 0,
      uploadStatus: false,
  }
}

2.函数

代码如下（示例）：

		
		// 自定义7牛上传
        uploadWithSDK(e) {
            let _self = this;
            _self.uploadProgress = 0;
            _self.uploadStatus = false;
            let file = document.getElementById("uploadFile").files[0];
            // if(file.type != 'video/mp4'){
            //     alert("最大上传文件1G");
            //     return false;
            // }
            if (file.size > 1 * 1024 * 1024 * 1024) {
                alert("最大上传文件1G");
                return false;
            }
            _self.getUploadToken().then(uploadToken => {
                if (!file) { return }
                let compareChunks = [];
                var finishedAttr = [];
                // 基础配置 [详情](https://developer.qiniu.com/kodo/1283/javascript)
                let config = {
                    checkByServer: true,
                    checkByMD5: true,
                    forceDirect: false,
                    useCdnDomain: true,
                    disableStatisticsReport: false,
                    retryCount: 6,
                    region: qiniu.region.z1,
                    debugLogLevel: 'INFO'
                };
                let putExtra = {
                    customVars: {}
                };
                let name = file.name;
                putExtra.customVars["x:name"] = name.split(".")[0]; // 文件名称
                let observable = qiniu.upload(file, name, uploadToken, putExtra, config);
                var next = function (response) {
                    var chunks = response.chunks || [];
                    var total = response.total;
                    // 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过
                    for (var i = 0; i < chunks.length; i++) {
                        if (chunks[i].percent === 0 || finishedAttr[i]) {
                            continue;
                        }
                        if (compareChunks[i].percent === chunks[i].percent) {
                            continue;
                        }
                        if (chunks[i].percent === 100) {
                            finishedAttr[i] = true;
                        }
                        console.log(chunks[i].percent);
                    }
                    compareChunks = chunks;
                    // console.log("总进度：", total.percent);
                    _self.uploadProgress = _self.toDecimal2(total.percent);
                };
                var error = function () {
                    _self.$message.error("上传出错!");
                }
                var complete = function (res) {
                    console.log('res: ', res);
                    // _self.completeFileUrl = `${_self.qiniuaddr}/${res.key}`;
                    _self.ruleForm.gcjsyxcl = {
                        url: `${_self.qiniuaddr}/${res.key}`,
                        fileName: name
                    };
                    _self.$message.success("上传成功!");
                }
                // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
                var subObject = {
                    next: next,
                    error: error,
                    complete: complete
                };
                _self.controlUpload = function () {
                    // _self.addUploadBoard(file);
                    _self.uploadStatus = !_self.uploadStatus;
                    if (_self.uploadStatus) {
                        _self.subscription = observable.subscribe(subObject); // 调用sdk上传接口获得相应的observable，控制上传和暂停
                    } else {
                        _self.subscription.unsubscribe();
                    }
                }
                _self.controlUpload();
            });
        },
        // 获取上传（七牛）token。需要后端提供七牛服务器token
        getUploadToken() {
            let _self = this;
            return _self.request.get("/blade-resource/oss/endpoint/oss-upload-token") // 我们获取token的后端接口
        },