el-upload 二次封装

使用场景：
导入或上传附件使用
代码如下：

<template>
    <div style="display: inline-block; margin-left: 10px">
        <el-upload
            class="upload-demo"
            :action="actionUrl"
            :file-list="files"
            :headers="header"
            :show-file-list="showFileList"
            :accept="accept"
            :limit="limit"
            :before-upload="beforeAvatarUpload"
            :on-remove="remove"
            :before-remove="beforeRemove"
            ref="fileUp"
            :auto-upload="autoUpload"
            :multiple="multiple"
            :disabled="disabled"
            :on-success="success"
            :on-error="error"
            :data="fileParams || {}"
            :on-change="changeFile"
        >
            <el-tooltip placement="bottom" effect="light">
                <div slot="content">
                    附件格式支持：{{ accept }}
                    <br />附件大小限制：单个文件不超过50MB
                </div>
                <el-button type="primary">{{btnName || '导入'}}</el-button>
            </el-tooltip>
        </el-upload>
        <Message NoCancelBtn ref="message" :msg="msg">  
            <div v-if="msg.title">{{ msg.title }}</div>
            <p v-for="item in msg.message" :key="item">{{ item }}</p>
        </Message>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import req from '@/request.js'
import {Base64} from 'js-base64'
import Message from '@/components/investCommon/message.vue'
export default {
    components: {Message},
    // props: ['limit', 'verify', 'filesList', 'btnName', 'fileData'],
    props: {
        limit:{
            type:Number,
            default:9999999,
        },
        verify:{
            type:String,
            default:""
        },
        filesList:{
            type:Array,
            default:()=>[]
        },
        value:{
            type:Array,
            default:()=>[]
        },
        btnName:{
            type:String,
            default:"选择文件"
        },
        fileData:{
            type:Object,
            default:{}
        },
        autoUpload:{
            type:Boolean,
            default:true
        },
        url:{
            type:String,
            default:""
        },
        disabled:{
            type:Boolean,
            default:false
        },
        showFileList:{
            type:Boolean,
            default:true
        },
        multiple:{
            type:Boolean,
            default:false
        },
    },
    data() {
        return {
            src: '',
            fileId: '',
            fileTree: '',
            files: [],
            uploadingFiles: {},
            list: [],
            isChecking: true,
            accept: '.xls,.xlsx',
            num: 0,
            msg: {
                title: '',
                message: [],
            },
            formAdd: {},
            fileParams: {},
            loading: false
        }
    },
    computed: mapState({
        header: (state) => {
            if (state.login && state.login.currentUser) {
                return {
                    Authorization: `Bearer ${state.login.currentUser.token}`,
                }
            }
            return {}
        },
        actionUrl: function () {
            // return window.context.invest + '/fileView/importData'
            return window.context.invest + this.url
        },
    }),
    watch: {
        fileData: {
            handler: function(value) {
               this.fileParams.requestParam = JSON.stringify(value);
            }
        },
        value: {
            immediate: true,
            deep: true,
            handler: function (newValue) {
                if(!newValue){
                    this.files =[];
                }else{
                    this.files = newValue;
                }
            },
        },
        
    },
    mounted() {
        
    },
    methods: {
        remove(file, fileList) {
            this.files = fileList;
            this.$emit('input', this.files)
        },
        beforeRemove(file, fileList) {
            // if (this.isChecking) {
            //     return this.$confirm(`确定移除 ${file.name}？`).then(() => {
            //     this.num = 0
            //     })
            // } else {
            //     this.num = 0
            // }
        },
        error(response, file, fileList) {
            this.files=fileList;
            let errorData = `导入失败:${response.message}` ;
            this.$messageTips({ 
                width:"50%",
                message:errorData,
            })
            delete this.uploadingFiles[Base64.encode(file.name)]
        },
        beforeAvatarUpload(file) {
            // 文件类型限制
            const name = file.name ? file.name : ''
            const ext = name
                ? name.substr(name.lastIndexOf('.') + 1, name.length)
                : true
            const isExt = this.accept.indexOf(ext) < 0
            this.isChecking = !isExt
            if (isExt) {
                if (this.accept == 'false') {
                    this.$message.error('请配置可上传文件的格式!')
                } else {
                    this.$message.error(
                        '上传的附件只能是 ' + this.accept + '格式!'
                    )
                }
                return !isExt
            }
            this.uploadingFiles[Base64.encode(name)] = 'eror'
           
        },
        success(res,file, fileList) {
            if (res.state) {
                if(this.limit===1 && this.autoUpload){//上传成功并清空附件列表
                    this.files=[];
                    this.$emit('input', this.files)
                }
                this.$emit('successCallback',res)
                this.$message.success(res.message)
            } else {
                fileList.pop()
                this.files=fileList;
                this.$emit('input', this.files)
                this.$emit('errorCallback',res);
                let errorData = `导入失败:${res.message}`;
                this.$messageTips({ 
                    width:"50%",
                    message:errorData,
                })
            }
        },
        changeFile(file, fileList) {
            this.$nextTick(()=>{
                this.$emit('input', fileList)
            })
            
        },
        handleSubmitFile(form) {
            this.$nextTick(() => {
                this.$refs.fileUp.submit()
                    
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.upload-demo {
    max-width: 570px;
    margin-top: 5px;
}
</style>