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

1、vue文件html部分

 列表导出

          
            批量导入
          

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('上传失败')
        })
    },

你可能感兴趣的:(vue.js,javascript,前端)