Vue文件上传、下载

使用场景：

1. 点击按钮， 下载指定模板A；
   入参id空，调取接口下载；
2. 点击按钮，下载table表格中的数据
   入参当前页面的id，下载table数据
3. 点击上传，上传指定模板A， 并渲染数据到table表格中
   入参id，上传模板

接口使用安装axios：

npm install axios -S

项目完整版代码来咯

<template>
  <el-dialog
    title="上传下载"
    v-loading="DataLoading"
    width="40%"
    destroy-on-close
  >
    <el-header>
      <div class="left-panel"></div>
      <div class="right-panel">
        <div class="left-panel-search">
          <el-button type="text" size="small" @click="downloadempalte"
            >下载模板文件</el-button
          >
          <!-- 上传 -->
          <el-upload
            class="upload-demo"
            ref="upload"
            accept=".csv, .xlsx, .xls"
            action="#"
            :multiple="false"
            :show-file-list="false"
            :limit="1"
            :auto-upload="false"
            :on-change="handleChange"
          >
            <el-button type="primary" size="small">上传新渠道</el-button>
          </el-upload>
          <el-button type="primary" size="small" @click="downloadTableData"
            >下载列表</el-button
          >
        </div>
      </div>
    </el-header>
    <div class="container">
      <el-scrollbar class="scrolbar-wrapper">
        <el-table
          id="out-table"
          ref="table"
          :data="apiObj"
          stripe
          remoteSort
          remoteFilter
        >
          <el-table-column
            label="序号"
            type="index"
            width="100"
          ></el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="参数" prop="param"></el-table-column>
          <el-table-column
            label="链接"
            fixed="right"
            align="center"
            width="140"
          >
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
const axios = require('axios')
export default {
  data() {
    return {
      id: this.$query.id,
      apiObj: [],
      DataLoading: false,
      flag: 0, // 0 false, 接口不报提示；1 报提示
    }
  },
  created() {
    this.getChannelLink()
  },
  methods: {
    // 渠道列表
    getChannelLink(flag, msg) {
      const tempData = {
        id: this.id,
      }
      this.$api.channelList(tempData).then((res) => {
        if (res.code == '2000') {
          this.DataLoading = false
          this.apiObj = res.data.rows
          if (flag) {
            this.$message({
              type: 'success',
              message: msg,
            })
          }
        }
      })
    },
    // 下载模板
    downloadempalte() {
      const temp = {
        id: '',
      }
      axios({
        method: 'post',
        url: 'http://fls-mdp-xlink-stg.paic.com.cn/xlink-cms-sit/cms/project/channel/getTemplate',
        data: temp,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          // Authorization: getLocalData("TOKEN"),
        },
        responseType: 'blob',
      }).then(function (response) {
        // 创建a标签
        const a = document.createElement('a')
        // 初始化a标签
        let href = window.URL.createObjectURL(response.data)
        a.href = href
        // 计算文件名
        let filenema = response.headers['content-disposition']
          .split('filename=')[1]
          .split('.xlsx')[0]
        // 文件名转码
        filenema = decodeURI(escape(filenema))
        a.download = decodeURIComponent(filenema)
        // 触发点击并一处
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(href)
      })
    },

    // 下载table列表
    downloadTableData() {
      const temp = {
        id: this.id,
      }
      axios({
        method: 'post',
        url: 'http://fls-mdp-xlink-stg.paic.com.cn/xlink-cms-sit/cms/project/channel/getTemplate',
        data: temp,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          // Authorization: getLocalData("TOKEN"),
        },
        responseType: 'blob',
      }).then(function (response) {
        // 创建a标签
        const a = document.createElement('a')
        // 初始化a标签
        let href = window.URL.createObjectURL(response.data)
        console.log('href', href)
        a.href = href
        // 计算文件名
        let filenema = response.headers['content-disposition']
          .split('filename=')[1]
          .split('.xlsx')[0]
        console.log('filename', filenema)
        // 文件名转码
        filenema = decodeURI(escape(filenema))
        a.download = decodeURIComponent(filenema)
        // 触发点击并一处
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(href)
      })
    },
    // 上传渠道文件
    handleChange(file) {
      this.$refs.upload.clearFiles()
      this.fileTemp = file.raw
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          this.fileTemp.type == 'application/vnd.ms-excel'
        ) {
          let params = new FormData()
          params.append('file', this.fileTemp)
          params.append('id', this.id)
          let uploadURL =
            'http://fls-mdp-xlink-stg.paic.com.cn/xlink-cms-sit/cms/project/channel/upload'
          axios({
            method: 'post',
            url: `${uploadURL}/cms/project/channel/upload`,
            data: params,
            headers: {
              'Content-Type': 'application/json;charset=UTF-8',
              // Authorization: getLocalData("TOKEN"),
            },
            headerType: 'multipart/form-data',
          }).then((res) => {
            if (res.data.code == '2000') {
              this.DataLoading = true
              this.getChannelLink(1, res.data.msg) //1 调取接口要提示语
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg,
              })
            }
          })
        } else {
          this.$message({
            type: 'warning',
            message: '文件格式不正确，请参考模板文件填写！',
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！',
        })
      }
    },
    /**
     * 获取localStorage,[token]，兼容做乾坤子应用时取值时会带上 ”“ 的问题
     */
    // getLocalData(table){
    //  var data = localStorage.getItem(token);
    //     return data ? data.replace(/\"/g,'') : null
    // }
  },
}
</script>

<style scoped>
.container {
  height: 500px;
  overflow: auto;
}
.scrolbar-wrapper {
  height: 500px;
}
.upload-demo {
  display: inline-block;
  margin: 0 20px;
}
</style>