el-upload typescript 多文件上传添加loading progress

最新推荐文章于 2024-08-30 16:24:50 发布

对点出暴击

最新推荐文章于 2024-08-30 16:24:50 发布

阅读量3.5k

点赞数

分类专栏： vue 文章标签： typescript vue el-upload progress

本文链接：https://blog.csdn.net/qq_20686495/article/details/113517133

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

el-upload的单文件上传loading框很好做，如果涉及到单次要上传多个文件，产品同志又给你提bug说加载条怎么消失了的时候，改怎么优化自己的上传组件呢？

标签

<el-upload
    ref="uploader"
    style="display:inline-block;"
    action
    :on-success="handleImportFinished"
    :on-progress="handleUploadProgress"
    :on-error="handleUploadError"
    :http-request="UploadOSSFile"
    :multiple="true"
    :show-file-list="false"
    :before-upload="beforeUpload"
    >
    <el-button
        :loading="uploading"
        :disabled="uploading"
        type="primary"
        size="small"
        style="margin-left: 10px;"
    >上传文件</el-button>
</el-upload>
<el-progress
    v-if="progressFlag"
    :percentage="loadProgress"
/>

script

<script lang="ts">
import { Component, Prop, PropSync, Ref, Vue, Watch } from 'vue-property-decorator';
import { UploadOSS } from '@/utils/oss';
import { ElUpload, ElUploadProgressEvent } from 'element-ui/types/upload';

interface IApkListFormData {
    urls: { filename: string; url: string }[]
}
@Component({
  name: 'apkList'
})
export default class extends Vue {
    @Ref() uploader!: ElUpload;
    private formData: IApkListFormData = {
        urls: []
    };
    private uploading = false; // 上传执行状态
    private fileLength: number = 0; // 一次上传多个文件的数量
    private loadProgress: number = 0; // 进度条值
    private progressFlag: boolean = false; // 显示进度条
    
    private beforeUpload(file: any) {
        this.fileLength++;
    }
    private handleUploadProgress(e: ElUploadProgressEvent) {
        this.uploading = true;
        this.progressFlag = true; // 显示进度条
        const base = this.formData.urls.length ? Math.ceil(100 / this.fileLength * this.formData.urls.length) : 0
        this.loadProgress = base +  Math.ceil(e.percent / (this.fileLength)); // 动态获取文件上传进度
        if (this.loadProgress >= 100) {
            this.loadProgress = 100
            setTimeout(() => {
                this.progressFlag = false
                this.loadProgress = 0;
            }, 200)
        }
    }
    private async handleImportFinished(param: any) {
        this.formData.urls.push({
            filename: param.name,
            url: DOWNLOAD_URL + param.name
        });
        if (this.fileLength === this.formData.urls.length) {
            this.saveApkList();
        }
    }
    private UploadOSSFile(option: any) {
        // 你的前端文件上传oss代码
    }
    private async saveApkList() {
        try {
            await 保存上传包(this.formData);
            this.$message.success('上传成功');
            this.uploading = false;
            this.formData.urls = [];
            this.fileLength = 0;
        } catch (err) {
            console.log(err.toString());
        }
    }
}
</script>