代码改变世界
[登录 · 注册]
  • 如何使用elemenui实现文件的上传与下载
  • 如何使用vuejs和element-ui实现文件的上传与下载

    1、文件上传el-upload

    <el-upload
        class="upload-style"
         :action="UploadListUrl()"
         :show-file-list="ifImportSucess"
         :on-success="handleImportSuccess"
         :headers="importHeader"
    >
          <el-button class="import-btn">数据导入</el-button>
    </el-upload>
    

    action: 需要导入的数据源地址

    headers:大多数情况下,前后端接口请求会有加密token处理,这时候就需要修改对应的header请求头

    on-success: 上传成功之后的一些处理

    2、文件的下载

    <el-button class="import-btn" @click="handleDownListModelClick">下载模板</el-button>

    直接通过点击事件来触发需要下载的接口地址

    需要注意的是,如果对接的后端接口没有进行二进制数据处理,则需要在请求头中添加

    responseType = 'blob' // 与headers是平级的

    通过点击事件--调用接口请求,返回对应的二进制编码,(有可能接口已经处理过),那直接转换成我们需要的下载URL即可

     // 下载模板
        async handleDownListModelClick () {
          try {
            const res = await this.$store.dispatch('rights/downloadListModel')
            console.log(res)
    // 接口未处理二进制 // const blob = new Blob([res.data], { // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // }) const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(res) // 创建下载的链接 downloadElement.href = href downloadElement.download = `模板.xlsx` // 下载后文件名 document.body.appendChild(downloadElement) downloadElement.click() // 点击下载 document.body.removeChild(downloadElement) // 下载完成移除元素 window.URL.revokeObjectURL(href) // 释放掉blob对象 if (res) { this.$message({ type: 'success', message: '下载成功' }) } } catch (err) { console.warn(err) } },

    注意,如果项目中使用了mock.js需要在vuejs项目中的main.js中注释掉,不然返回的二进制编码会带入mock的数据导致无法正确转码,具体原因。。。还在研究中。

    以上就是,基于elemen-ui的文件的上传与下载。

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/layaling/p/13567804.html
Copyright 2008-2020 晋ICP备12007731号-1