vue中文件上传(导入),文件下载(导出)

1、vue文件html部分

 <a-button class="button" @click="handleExport">列表导出</a-button>

          <a-upload :before-upload="handleBeforeUpload" :custom-request="handleCustomRequest">
            <a-button class="button" style="margin: 0 10px">批量导入</a-button>
          </a-upload>

2、methods部分

//导出    
handleExport() {
      console.log('tenantId', this.queryParam.tenantId)
      postAction(
        '/epcp/vehicle/export?tenantId=' + this.queryParam.tenantId + '&workType=' + this.queryParam.workType
      ).then(res => {
        if (res.success) {
          window.location.href = res.message
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
//导入  
handleBeforeUpload(file) {
      // 在上传前的操作,例如验证文件类型或大小
      // 如果文件验证不通过,返回 false 可以阻止上传
      console.log('before upload:', file)
    },
handleCustomRequest(options) {
      // 自定义请求,通过后台接口上传文件
      const formData = new FormData()
      formData.append('file', options.file)
      formData.append('tenantId', this.queryParam.tenantId)

      postAction('/epcp/vehicle/import', formData)
        .then(response => {
          debugger
          if (response.result.total == response.result.success) {
            // 全部成功
            // 上传成功的处理
            console.log('upload success:', response.data)
            this.$message.success('上传成功')
            this.loadData(1)
          } else {
            this.loadData(1)
            // this.$message.error('失败:', JSON.stringify(response.result.failedRows))
            this.$message.open({
              content: JSON.stringify(response.result.failedRows),
              duration: 4 // 显示时长,单位为秒
            })
          }
        })
        .catch(error => {
          // 上传失败的处理
          console.log('upload error:', error)
          this.$message.error('上传失败')
        })
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

几个高兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值