Vue2 ElementUI Upload组件http-request用法

一、示例代码

<template>
    <el-upload
                ref="upload"
                action=""
                :auto-upload="false"
                :file-list="upload.fileList"
                :accept="upload.accept"
                :on-remove="removeFile"
                :on-change="verifyFile"
                :http-request="uploadFile"
                :on-success="uploadSuccess"
                :on-error="uploadError">
                <el-button slot="trigger" size="small">选择文件</el-button>
                <el-button type="primary" size="small" :disabled="uploadDisabled" :loading="upload.loading" style="margin-left: 10px;" @click="confirmUpload">上传文件</el-button>
                <div slot="tip" style="font-size: 12px;">只能上传xls/xlsx文件</div>
            </el-upload>
</template>
<script>
export default {
    data () {
        upload: {
                loading: false,
                accept: '.xls,.xlsx',
                fileList: []
        }
    },
    computed: {
        uploadTypeErrorMessage () {
            return `只能上传 ${this.upload.accept.split(',')} 格式的文件`;
        },
        uploadDisabled () {
            return this.upload.fileList.length===0;
        }
    },
    methods: {
        removeFile () {
            let index = this.upload.fileList.findIndex(li =>li.uid===file.uid);
            index===-1?'':this.upload.fileList.splice(index, 1);
        },
        verifyFile (file) {
            if(file.status==='ready') {
                this.uploadDisabled?this.upload.fileList.push(file):this.upload.fileList.splice(0, 1, file);
                if(!['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(file.raw.type)) {
                    this.$message.error(this.uploadTypeErrorMessage);
                    this.removeFile(file);
                }
            }
        },
        confirmUpload () {
            this.$refs.upload.submit();
        },
        uploadFile (options) {
            this.upload.loading = true;
            uploadFile({ //自定义接口
                file: options.file
            }).then(res => {
                options.onSuccess(res);
            }).catch(error => {
                options.onError(error);
            }).finally(() => {
                this.upload.loading = false;
            });
        },
        uploadSuccess (res) {},
        uploadError (error) {
            this.$message.error(error);
        }
    }
}
</script>