vue+element/upload 导入/导出

最新推荐文章于 2024-03-15 14:41:32 发布

原创最新推荐文章于 2024-03-15 14:41:32 发布 · 918 阅读

CC 4.0 BY-SA版权

本文详细介绍了一种前后端一体化解决方案，通过具体代码示例展示了如何实现文件的上传与导出功能。涵盖了前端Vue框架下element UI组件库的el-upload和el-button组件的使用，以及后端响应的处理，包括文件流的导出和文件名的正确解析。

1.导入

/*html片段*/

<el-upload
  class="upload"
  action="" // action是必填项，自定义导出给action制空
  :http-request="uploadSectionFile" // 使用http-request自定义导入内容
  :show-file-list="false"
>
  <el-button
    class="in-item"
    type="primary"
    icon="el-icon-upload"
    @click="handleEntrance"
  >
    导入
  </el-button>
</el-upload>

/*js片段*/

uploadSectionFile(file) { // file导入文件
  if (file) {
    uploadHospital(file).then(res => { //  uploadHospital为自定义接口
      if (Number(res.code) === 1) {
        this.$message({
          message: res.data,
          type: 'success'
        })
      }
    })
  }
},
// 导入
handleEntrance() {
  this.uploadSectionFile()
},

/*自定义接口*/

export function uploadHospital(fileobj) {
  const param = new FormData() // 上传文件为forData类型
  param.append('excelFile', fileobj.file)
  console.log(fileobj, param)
  return request({
    method: 'post',
    url: '/management/hospital/uploadHos',
    headers: { 'Content-Type': 'multipart/form-data' }, // 设置响应头
    data: param
  })
}

2.导出

/*导出文件流，后端返回为文件*/
/*html*/
<el-button
  class="out-item"
  type="primary"
  icon="el-icon-download"
  @click="handleExport"
>导出</el-button>
/*js*/
handleExport() {
  exportHospital().then((res) => {
    const file = this.$store.state.app.headerContent  //文件名从response 的header中获取
    const filename = file['content-disposition'].split(';') [1].split('filename=')[1].split('"')[1]  // 从content-disposition 中切割出导出文件名称
    const en = decodeURIComponent(filename)
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    if (window.navigator.msSaveOrOpenBlob) {
      // 兼容ie
      window.navigator.msSaveBlob(blob, en)
    } else {
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href

      downloadElement.download = en // 下载后文件名

      document.body.appendChild(downloadElement)
      // 此写法兼容火狐
      const evt = document.createEvent('MouseEvents')
      evt.initEvent('click', false, false)
      downloadElement.dispatchEvent(evt)

      document.body.removeChild(downloadElement)
    }
  })
},