vue2文件上传与下载

1.文件上传 

html部分使用element上传组件

      <el-upload
        class="upload-demo"
        :action="importUrl" //上传路径，如http://192.168.18.231:9528/xxxx
        multiple
        :show-file-list="true" //是否真实文件列表
        :on-success="handleSuccess" //上传成功触发
        :on-error="handleError"  //上传失败触发
        :data="importUscc" //对象类型  额外的参数,如{ uscc: this.formData.uscc }
        :auto-upload="false" //是否在选取文件后立即进行上传(false为不立即上传)
        :on-change="changeList" //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会触发
      >
        <el-button size="small" type="primary">点击上传</el-button>
        
      </el-upload>
      <el-button type="text" @click="downloadFile">点击下载</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="importByCond">确定</el-button>
      </span>

js部分

若文件立即上传，auto-upload为true，在选择好文件点击打开后便可自动上传

若文件不立刻上传，auto-upload为false，则后续触发上传函数如下

 // 上传文件
    importByCond() {
      //参数，注意请求头应为文件格式
      const obj = {
        uscc: this.formData.uscc,
        file: this.file
      }
      batchImport(obj).then(res => {
        if (res.state === 200) {
          this.$message({
            message: '文件上传成功',
            type: 'success'
          })
          // 刷新页面
          this.getListFileds()
        } else {
          this.$message({
            message: '文件上传失败',
            type: 'error'
          })
        }
      })
    },

注：请求头转为文件格式

// 导入文件
export function batchImport(data) {
  return request({
    url: '/wasteGasMonitor/batchImport',
    method: 'post',
    data,
    //请求头格式转成文件格式
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

2.文件下载

触发函数downloadFile

如果后端提供的是下载地址

 // 下载文件
    downloadFile() {
      // 文件的URL地址
      const fileUrl = 'http://xxx.com/template/file/download?fileName=文件名.xlsx'
      // 下载文件
      window.open(fileUrl)
      this.importDialogVisible = false
    },

如果后端提供的接口

// 下载文件

export function downloadImport(params) {  

  return request({

    url: '/masterdata/v1/template/file/xxxxx',

    method: 'get',

    params,

    responseType: 'blob',

    headers: {

      'Content-Type': 'application/json'

    }

  })

}

 函数

   // 触发了下载文件的函数

    downloadFile() {

      downloadImport({ fileName: '文件名.xlsx' }).then(res => {

        const link = document.createElement('a')

        link.download = '文件名.xlsx'

        link.href = window.URL.createObjectURL(res)

        link.click()

        window.URL.revokeObjectURL(link.href)

      })

    },

效果