avue-form 附件上传增加参数；上传前检查是否重复覆盖或者跳过

最新推荐文章于 2024-01-10 15:44:22 发布

祝你今天也快乐

最新推荐文章于 2024-01-10 15:44:22 发布

阅读量1.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： avue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/killerdoubie/article/details/134997533

avue 专栏收录该内容

21 篇文章

订阅专栏

文章描述了一个使用Vue框架的表格组件，实现设备台账从Excel文件的导入功能，包含文件上传、数据重复检测和覆盖/跳过选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

html:

<el-dialog title="设备台账导入" append-to-body :visible.sync="excelBox" width="555px">
        <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter" :upload-before="uploadBefore">
        </avue-form>
</el-dialog>

js：

excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "文件上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/device/import-device",
          },
        ],
      },
isCovered:"SKIP",

 uploadBefore(file, done) {
      handleBeforeUpload(file).then(res => {
        if (res.data.code == 200) {
          let title = res.data.data
          this.$confirm(`检测到您上传的数据，其中【${title}】重复，请选择【跳过】还是【覆盖】该数据？`, '提示', {
            confirmButtonText: '覆盖',
            cancelButtonText: '跳过',
            type: 'warning'
          }).then(() => {
            // 覆盖
            this.isCovered="COVER"
            done()
          }).catch(() => {
            // 跳过
            this.isCovered="SKIP"
            done()
          });
        }
      })
    },

watch: {
    isCovered() {
      if (this.isCovered !== "") {
        const column = this.findObject(this.excelOption.column, "excelFile");
        column.action = `/api/device/import-device?importStrategy=${this.isCovered}`;
      }
    },
  },