解决element-ui 上传文件 达到limit之后阻止选择文件弹窗弹出

1,099 阅读1分钟

重要的描述放在头部

<el-button>不可添加disabled 否则不能阻止选择文件框弹出

<el-upload>不可添加disabled 否则无法正常时候自带的删除文件方法

vue文件

`<el-upload
                class="upload-demo"
                ref="uploadH"
                :on-exceed="handleExceed"
                action=""
                :limit="1"
                :file-list="fileList"
                :on-change="handleChange"
                :on-remove="remove"
                :auto-upload="false">
            <el-button slot="trigger"  @click.stop="clickSubmit">选取文件</el-button>
            <el-button type="primary" @click="exportItem" style="margin-left: 10px;">导出模板</el-button>
        </el-upload>

`

methods

handleExceed(files, fileList) {
         this.$popError('只能上传单个文件')
        return false
    },
handleChange(file, fileList) {
    if (!this.$uploadLimit(file, 10, ['.xlsx', '.xls'])){
        fileList.pop()
    }
    this.fileList = fileList
},
remove(file, fileList) {
    console.log(fileList)
    this.fileList = fileList
},

submitUpload(){
    if (this.fileList.length > 0 && this.fileList[0].raw) {
        this.uploading = true
        const parmas = new FormData()
        parmas.append('file', this.fileList[0].raw)
        parmas.append('projectId', 0)
        parmas.append('matterType', this.typeFrom.toUpperCase())
        this.$http.importItem(parmas).then(res => {
            this.uploading = false
            if (res.data.code == 200){
                this.$popSuccess('上传成功')
                this.importDialog = false
            } else {
                this.$popError(res.data.message)
            }
        })
    }
},
// 导出模板
exportItem(){
    this.$bn_confirm({
        msg: '导出',
        des: '将要导出模板'
    }, (instance, done) => {
        instance.confirmButtonLoading = true
        const params = {
            projectId: 0,
            matterType: this.typeFrom.toUpperCase()
        }
        this.exportTemplate(params).then(res => {
            done()
            instance.confirmButtonLoading = false
            const blob = new Blob([res.data])
            const name = 'template.xlsx'
            this.$download(blob, name)
        })
    })
},
clickSubmit(){
    //self.$refs['upload'].$refs['upload-inner'].handleClick()
    if(this.fileList.length>0){
        this.$popError('只能选取一个文件!')
        return;
    }else{
      this.$refs['uploadH'].$refs['upload-inner'].handleClick()
    }
},