Vue批量上傳文件及實時進度

<template>
  <el-row>
    <el-col :span="12">
      <el-upload class="upload-demo" ref="upload" :action="upload_url" drag multiple :auto-upload="false" :on-change="beforeUpload"
        :file-list="updatefile" :http-request='uploadFile'>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text" style="margin-bottom:15px">將文件拖到此處，或<em>點擊上傳</em></div>
        <el-progress :percentage="percentage" v-if="upload"></el-progress>
        <div class="el-upload__tip" slot="tip">
          批量文件上傳，只能上傳固件
          <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">點擊上傳</el-button>
        </div>
      </el-upload>
    </el-col>
  </el-row>
</template>

<script>
export default {
    data() {
        return {
            fileData: '',
            upload_url: `${process.env.VUE_APP_DEVICE_BACKEND}/sys/uploads`,
            updatefile: [],
            loading: null,
            upload: false,
            percentage: 0
        };
    },
    created() {},
    methods: {
        uploadFile(file) {
            this.fileData.append('file', file.file);
        },
        submitUpload() {
            this.$confirm('確認要上傳嗎？', '提示', {
                type: 'info'
            })
                .then(() => {
                    var files = this.$refs.upload.uploadFiles;
                    if (files.length == 0) {
                        this.$message.error('請選擇文件！');
                        return;
                    }

                    this.loading = this.$loading({
                        lock: true,
                        text: '上傳中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    this.fileData = new FormData();
                    this.$refs.upload.submit();

                    this.upload = true;
                    this.$axios
                        .post(this.upload_url, this.fileData, {
                            onUploadProgress: (data) => {
                                this.percentage = ((data.loaded / data.total) * 100) | 0;
                            }
                        })
                        .then((res) => {
                            if (res.code === 0) {
                                var html = '<div>';
                                res.data.map((item) => {
                                    if (item.is_ipload) {
                                        html += `<p style='color: green;'>文件：${item.file_name}，狀態：上傳成功；</p>`;
                                    } else {
                                        html += `<p style='color: #ff6868;'>文件：${item.file_name}，狀態：上傳失敗，錯誤信息：${item.error_message}；</p>`;
                                    }
                                });
                                html += '</div>';
                                this.$alert(html, '上傳結果', {
                                    dangerouslyUseHTMLString: true,
                                    customClass: 'msgbox'
                                });

                                this.fileData = '';
                                this.updatefile = [];
                            } else {
                                this.$alert(res.meta.error || '上傳失敗', '提示');
                            }
                            this.loading.close();
                            this.upload = false;
                        })
                        .catch((err) => {
                            this.$message.error('上傳失敗，網絡請求錯誤');
                            this.loading.close();
                            this.upload = false;
                        });
                })
                .catch(() => {});
        },
        beforeUpload(file) {
            let arr = file.name.split('.');
            let bin = arr[arr.length - 1];

            if (bin != 'bin') {
                this.$message.error('上傳文件只能是固件!');
                this.updatefile = [];
                return false;
            }
            return bin;
        }
    }
};
</script>
<style>
.msgbox {
    width: auto;
}
</style>