基于Element UI自定义带进度条的腾讯云上传组件

.upload-item-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.el-icon-delete {
    margin-left: 10px;
}

<div id="demo">
    <el-upload ref="upload" multiple :http-request="handleUpload" :on-remove="handleRemove" :show-file-list="false" :file-list="fileList">
        <el-button type="success" class="fR" icon="el-icon-upload">添加附件</el-button>
    </el-upload>
    <div class="upload-list">
        <div class="upload-item" v-for="(item,index) in fileList" :key="index">
            <div class="upload-item-title">
                <div>@{{ item.name }}</div>
                <i class="el-icon-delete" @click="handleDeleteFile(index)"></i>
            </div>
            <el-progress :percentage="item.progress" :status="item.upload_status" :text-inside="true" :stroke-width="20" v-if="item.progress!=100"></el-progress>
        </div>
    </div>
</div>

new Vue({
    el: "#demo",
    data: {
        cos: null,
        fileList: []
    },
    methods: {
        handleDeleteFile(index) {
            this.$confirm("您确定要删除该文件吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.researchForm.fileList.splice(index, 1);
                })
                .catch(() => {
                    console.log("已取消删除");
                });
        },
        handleUpload(param) {
            const self = this;
            let file = param.file;
            if (!file) return;
            let originName = file.name;
            let originSize = file.size;
            let originType = file.type;
            self.researchForm.fileList.push({
                name: originName,
                progress: 0,
                upload_status: "text"
            });
            var current_index = self.researchForm.fileList.length - 1;
            uAxios.get("/api/qcloud/secret").then(res => {
                let result = res.data.data;
                self.qq_cloud_config = result;
                self.cos = new COS({
                    getAuthorization: function(options, callback) {
                        callback({
                            TmpSecretId: result.tmp_secret_id,
                            TmpSecretKey: result.tmp_secret_key,
                            XCosSecurityToken: result.xcos_security_token,
                            ExpiredTime: result.expired_time
                        });
                    }
                });
                let bucket = result.bucket;
                let region = result.region;
                let upload_dir = result.dir;
                self.cos.putObject(
                    {
                        Bucket: bucket,
                        Region: region,
                        Key: result.dir + file.name,
                        Body: file,
                        ProgressInterval: 10,
                        onProgress: function(progressData) {
                            self.researchForm.fileList[current_index].progress = parseInt(
                                progressData.percent * 100
                            );
                        }
                    },
                    function(err, data) {
                        console.log(err || data);
                        if (err) {
                            self.$message.error({
                                message: err.error
                            });
                            self.researchForm.fileList[current_index].upload_status = "exception";
                        } else {
                            let file_path = "https://" +bucket +".cos." +region +".myqcloud.com/" +upload_dir +file.name;
                        }
                    }
                );
            });
        }
    }
});