vue 手动上传文件进度条显示进度

vue 手动上传文件显示进度条

项目开发中遇到需求，手动上传多个文件进度条显示上传进度。使用的vue + elementui, 使用框架上传本来是比较简单的，主要需要解决显示进度条和多个文件上传不能一次并非提交请求。 废话不多说直接上代码。

export default {
    data() {
        return {
            fileList: [],
            fileParamsList: [],
            uploadFilesList: []
        }
    },
    methods: {
        handleChange(file, fileList) {
            this.fileList = fileList;
        },
        showProgress(file, type, progress) {
            this.$forceUpdate();
            this.$set(
                this.uploadFilesList.filter(
                    (_file) => _file.uid == file.uid
                )[0],
                type,
                progress
            )
        },
        save() {
            if (!this.fileList.length) {
                return this.$message.warning("请选择要上传的文件");
            }
            this.submitFile(this.fileList[0]);
        },
        submitFile(params) {
            const fd = new FormData();
            fd.append("file", params.raw);
            fd.append("type", this.formData.type);
            const config = {
                onUploadProgress: (progressEvent) => {
                    // progressEvent.loaded:已上传文件大小
                    // progressEvent.total:被上传文件的总大小
                    let progressPercent = parseInt(
                        (
                            (progressEvent.loaded / progressEvent.total) *
                            100
                        ).toFixed(2)
                    );
                    if (progressPercent > 95) {
                        progressPercent = 95;
                    }
                    this.showProgress(params.raw, "progress", progressPercent);
                },
            };
            productFileUploadApi(fd, config)
                .then((res) => {
                    this.showProgress(params.raw, "progress", 100);
                    this.showProgress(params.raw, 'status', 'success');
                })
                .catch(() => {
                    this.showProgress(params.raw, "progress", 100);
                    this.showProgress(params.raw, "status", "exception");
                });
        },
    }
}

export function productFileUploadApi(params, config) {
    return http({
        url: '/file/upload',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data: params,
        timeout: 20000,
        ...config
    })
}

elementui 自带上传文件组件，上传多个文件时时一次请求多次上传接口，如果中间有文件上传失败了，无法控制友好的提示用户。通过递归上传，一次提交文件。能够减少浏览器同时发起接口请求，减小后端服务压力，也能一目了然的显示文件上传的信息。当然缺点也很明显，上传文件数量较多时，需要很大的耐心等待一个个的上传。第一次写文章分享，请见谅！