antD a-upload 上传前添加确认提示框

Vue上传组件二次确认

最新推荐文章于 2024-05-18 11:29:58 发布

原创最新推荐文章于 2024-05-18 11:29:58 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

SJF-Vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

SJF-Ant

7 篇文章

订阅专栏

本文介绍如何使用Vue的Ant Design上传组件实现上传文件前的二次确认功能，通过添加:beforeUpload属性并结合$confirm方法来阻止错误上传，确保数据准确性。

upload在上传前需要二次确认选择的内容，防止出错，如果拒绝就不执行上传的操作，确认信息无误才继续执行上传内容。

1.html上添加属性 :beforeUpload="beforeUpload"

// 加属性 :beforeUpload="beforeUpload" 

<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" :beforeUpload="beforeUpload" @change="handleChange">
        <a-button v-has="'OSEva:import'" type="primary" icon="import">{{ $t('btn.import') }}</a-button>
</a-upload>

2.添加方法返回一个promise就可实现阻断上传的action

beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.$confirm({
          content: '请确认导入年份是否一致111？',
          onOk: () => {
            console.log('ok ')
            resolve(file);
          },
          onCancel: () => {
            console.log('cancel')
            reject(file);
          },
        })
      });
},

参考：Vue-AntDesign >>上传组件：beforeUpload上传前检查问题_freedom-CSDN博客_ant design vue 上传组件