vue element 导入导出功能

导入功能，使用element upload组件，官方文档如下

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

需要注意的地方：

action为必选参数，上传的地址

headers为设置上传的请求头部

导出功能，通过按钮触发

<el-button
 type="primary"
 class="addBtn"
 plain
 icon="el-icon-download"
 @click="handleDownload"
 >导出</el-button
>

<script>
import {
  downloadData
} from '@/api/rfidManage/rfid'
    // 导出
    handleDownload() {
      console.log('导出')
      const pagination = { pageNum: this.pagination.pageNum, pageSize: this.pagination.pageSize }
      const requestParams = Object.assign({}, pagination, this.queryParam)
      downloadData(requestParams).then(res => {
        console.log(res)
        if (!res) {
          return
        }

        // 这里的blob处理可做可不做，我试了下，不做blob也可以下载且不乱码
        // 这里new Blob第一个参数要传需要在表格里展示的内容，因为没有做过，直接看了别人的代码，所以在这里踩坑踩了好久，到后来才发现是传值的问题
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })

        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')

        link.style.display = 'none'
        link.href = url
        // download 属性定义了下载链接的地址而不是跳转路径
        link.setAttribute('download', 'RFID导出数据.xls')
        document.body.appendChild(link)

        link.click()

        window.URL.revokeObjectURL(link.href) //释放url
        document.body.removeChild(link) //释放标签
      })
    },
</script>

downloadData

// 导出
export function downloadData(data) {
  return selt.request({
    url: 'device/rfidManage/export',
    method: 'get',
    headers: { Authorization: getToken() },
    responseType: 'blob',
    params: data
  })
}

最后感谢 掘金社区的@Shang