Vue/iView中upload组件的上传进度条实现显示自定义百分比

iView中Upload上传组件，配合表格组件，想要实现这样的功能（即要有拖拽上传，还有上传列表，以及上传进度），如图：

实现代码

话不多说，直接上干货代码

Html部分

<row class="" style="">
    <i-col span="20">
        <upload
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :on-error="handleError"
                :format="allowedFormat"
                :max-size="allowedSize"
                :on-progress="handleProgress"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                :data="uploadData"
                action="server/upload"
                style="">
            <div style="padding: 10px 20px; line-height: 1.6;">
                <icon type="ios-cloud-upload" size="42" style="color: #2D8CF0"></icon>
                <div>点击选择文档选择或将文档拖动到这里</div>
                <div>限{{formatFileSize(allowedSize,0)}}以内，允许的格式:</div>
                <div style="overflow-wrap: break-word;">{{allowedFormat.join(',')}}</div>
            </div>
        </upload>
        &nbsp;
    </i-col>
    <i-col span="4" class="text-right pl-2">
        <checkbox v-model="autoUpload">自动上传</checkbox>
        <i-button type="warning" :disabled="uploadList.length==0" long icon="ios-trash-outline" @click="clearClicked" style="margin-top:12px;">全部清除</i-button>
        <i-button type="primary" :disabled="shouldDisableUpload()" long icon="ios-cloud-upload-outline" @click="uploadClicked" style="margin-top:12px;">全部上传</i-button>
    </i-col>
</row>
<i-table v-show="uploadList.length>0" stripe border :columns="columns" :data="uploadList"></i-table>

JS部分(代码请根据自己的环境，稍作修改)

var app = new Vue({
        el: '#app',
        data: {
            spinShow: false,
            columns: [],
            list: [],
            item:{},

            autoUpload: true,
            allowedFormat: ['.jpg', '.gif', '.bmp', '.png', '.doc', '.docx', '.xls', '.xlsx', '.pdf', '.ppt', '.pptx', '.rar', '.zip', '.txt', '.mp3', '.swf', '.flv', '.vsd', '.psd', '.mp4', '.flv', '.mp4v', '.oga', '.ogg', '.ogv'],
            allowedSize: 104857600,
            columns: [],//上传列表column
            uploadList: []//上传列表list
        },
        created: function () {
            this.allowedFormat = this.allowedFormat.map(function (item) {
                return item.substr(1);
            });

            this.columns = [
                {
                    title: '文件名',
                    key: 'name',
                    minWidth: 150
                },
                {
                    title: '文件大小',
                    width: 140,
                    render: function (h, params) {
                        return h("span", app.formatFileSize(params.row.size, 2))
                    }
                },
                {
                    title: '状态',
                    key: 'status',
                    width: 200,
                    render: function (h, params) {
                        if (params.row.showProgress) {
                            return h('Progress', {
                                props: {percent: parseFloat(params.row.percentage.toFixed(2))}
                            });
                        } else {
                            if (params.row.status) {
                                if(params.row.status=='finished'){
                                    return h('Tag', {
                                        props: {color: 'success'}
                                    }, '已上传')
                                }else if(params.row.status=='error'){
                                    return h('Tag', {
                                        props: {color: 'error'}
                                    }, '错误')
                                } else{
                                    return h('Tag', {
                                        props: {color: 'warning'}
                                    }, params.row.status)
                                }
                            } else {
                                return h('Tag', {
                                    props: {color: 'volcano'}
                                }, '等待上传')
                            }
                        }
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    width: 140,
                    align: 'center',
                    render: function (h, params) {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function () {
                                        app.deleteFile(params.row.name)
                                    }
                                }
                            }, '清除'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    disabled: params.row.uid || app.autoUpload
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function () {
                                        app.uploadFile(params.row)
                                    }
                                }
                            }, '上传')
                        ]);
                    }
                }

            ];

        },
        methods: {
            formatFileSize: function(size, pointLength, units) {
                var unit;
                units = units || ['B', 'K', 'M', 'G', 'TB'];
                while ((unit = units.shift()) && size > 1024) {
                    size = size / 1024;
                }
                return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + unit;
            },

            // handleRemove(file) {
            //     const fileList = this.$refs.upload.fileList;
            //     this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            // },
            handleFormatError: function (file) {
                this.$Message.error('文件：' + file.name + ' 的格式不允许，请上传：'+this.allowedFormat.join(','));
            },
            handleMaxSize: function (file) {
                this.$Message.error('文件：' + file.name + ' 太大，请上传小于'+this.formatFileSize(this.allowedSize)+'的文件');
            },
            handleBeforeUpload: function (file) {
                var uploadList = [];
                var inserted = false;
                for (var i = 0; i < this.uploadList.length; i++) {
                    var item = this.uploadList[i];
                    if (item.name == file.name) {
                        uploadList.push(file);
                        inserted = true;
                    }else{
                        uploadList.push(item);
                    }
                }
                if(!inserted){
                    uploadList.push(file);
                }
                this.uploadList = uploadList;

                return this.autoUpload;
            },
            handleProgress: function (event, file) {
                var uploadList = [];
                for (var i = 0; i < this.uploadList.length; i++) {
                    var item = this.uploadList[i];
                    if (item.name == file.name) {
                        uploadList.push(file);
                    }else{
                        uploadList.push(item);
                    }
                }
                this.uploadList = uploadList;

            },
            handleError: function (res, file) {
                var uploadList = [];
                for (var i = 0; i < this.uploadList.length; i++) {
                    var item = this.uploadList[i];
                    if (item.name == file.name) {
                        uploadList.push(file);
                    }else{
                        uploadList.push(item);
                    }
                }
                this.uploadList = uploadList;
            },
            handleSuccess: function (res, file) {
                if(!res.result){
                    file.status='error';
                    this.$Message.error('文件：' + file.name + ' 上传错误：'+res.message);
                }else{
                    this.loadAttaches();
                }
                // console.log(res)
                var uploadList = [];
                for (var i = 0; i < this.uploadList.length; i++) {
                    var item = this.uploadList[i];
                    if (item.name == file.name) {
                        uploadList.push(file);
                    }else{
                        uploadList.push(item);
                    }
                }
                this.uploadList = uploadList;
            },
            deleteFile: function (name) { // 删除文件
                // 删除总展示文件里的当前文件
                this.uploadList = this.uploadList.filter(function (item) {
                    return item.name != name;
                })
            },
            uploadFile: function (file) {
                this.$refs.upload.post(file);
            },
            shouldDisableUpload: function() {
                if(this.autoUpload){
                    return true;
                }
                var uploadSize = 0;
                for (let i = 0; i < this.uploadList.length; i++) {
                    let item = this.uploadList[i]
                    if(!item.uid){
                        uploadSize++;
                    }
                }
                return uploadSize==0;
            },
            uploadClicked: function () { // 上传文件
                for (let i = 0; i < this.uploadList.length; i++) {
                    let item = this.uploadList[i]
                    if(!item.uid){
                        this.$refs.upload.post(item);
                    }
                }
            },
            clearClicked: function() {
                this.uploadList=[];
                this.$refs.upload.clearFiles();
            },
        }
    });