el-upload上传配合$confirm使用的问题

现象：el-upload如果再on-remove，先调用$confirm 点了取消，也删了文件。

解决方案：

1、使用:before-remove钩子

<el-upload

              ref="upload"

              class="m-l-10"

              :limit="1"

              action=""

              :accept="acceptSet(item)"

              :before-upload="validFile"

              :before-remove="e => fileRemove(e, item, index)"

              :file-list="uploadObject[item.type].list"

              :http-request="e => uploadFile(e, item, index)"

            >

              <el-button :disabled="uploadObject[item.type].list.length > 0" type="primary" plain size="small">

                {{ $t('common.addTo') }}

              </el-button>

            </el-upload>

 

2、不管点击的取消还是确定按钮，finally里面都获取到最新数据。

// 文件移除

    async fileRemove(e, item, index) {

      try {

        await this.$confirm(this.$t('tip.confirm.delete'), this.$t('common.warn'), {

          confirmButtonText: this.$t('common.confirm'),

          cancelButtonText: this.$t('common.cancel'),

          type: 'warning'

        })

        const res = await configDelete({ roleId: this.$attrs['form-data'].roleDetail.id, type: item.type })

        if (res.code === 200) {

          // this.getList()

          this.msgSuccess(this.$t('tip.success.delete'))

        }

      } catch {

        // 手动维护文件列表以取消删除

        // this.fileList = [...this.fileList]

        return false

      } finally {

        this.getList()

      }

    },