elementui upload组件自定义表格上传及下载

最新推荐文章于 2024-08-29 07:30:44 发布

Monster_MYY

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量794

点赞数

分类专栏： ElementUI 文章标签： javascript elementui

本文链接：https://blog.csdn.net/Monster_MY/article/details/115068482

版权

ElementUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端项目中利用ElementUI的upload组件，结合axios自定义上传和下载Excel文件。通过http-request属性实现文件上传，并在后端返回文件流后，利用Blob对象和虚拟DOM节点模拟文件下载。详细展示了HTML结构和fileUpload方法的实现过程。

摘要由CSDN通过智能技术生成

最近一个后台项目后端新增了一个接口，将excel模板文件作为参数，返回是填过数据后的表格文件流；前端需要增加一个上传按钮，实现表格文件的上传及下载。
elementui中有upload组件，可以直接实现上传功能，但是无法对返回的文件流进行合适的处理，所以用组件中的http-request属性来自定义文件上传的方式，更灵活。

1. HTML结构

<el-popover placement="right" title="注意：" content="上传文件的格式请参考excel模板！" trigger="hover">
    <el-upload slot="reference" :http-request="fileUpload" :show-file-list="false" :limit="1" accept=".xls,.xlsx" class="upload" drag action="">
      <i class="el-icon-upload"/>
      <div class="el-upload__text">将exel文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
</el-popover>

其中，http-request属性绑定的fileUpload方法就是自定义上传方法，action是必填项，这里可以填为空。

2. 自定义fileUpload方法

fileUpload(param) {
      const fileObj = param.file
      const fd = new FormData()  // 需要将文件转换为文件流
      fd.append('file', fileObj)
      axios({
        method: 'post',
        url: `${baseAPI[NODE_ENV]}futures-analysis/analysis/test`,
        data: fd,
        headers: {
          'Content-Type': 'multipart/form-data'  // 设置请求头
        },
        responseType: 'blob'  // 这里的响应类型要设置为blob，不然得到的响应是乱码，转换不了
      }).then(res => {
        // console.log(res)
        const link = document.createElement('a')  // 创建一个虚拟结点
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', '文件名.xlsx')
        document.body.appendChild(link)
        link.click() // 模拟点击下载的事件
        document.body.removeChild(link)
      }).catch(error => {
        console.log(error)
      })
    }