js vue 导出，上传

导出

从后端下载或导出文件一般两种方式
1、接口返回http地址。前端请求url实现下载，前端处理方便，但浪费服务器资源，需要开辟空间存放文件。
2、接口返回二进制文件流。前端通过解析文件流实现下载，前端处理相对麻烦，但不需要存放不浪费服务器资源。
大部分情况都是返回文件流形式

前端二进制要了解两个对象ArrayBuffer，Blob。常见于文件上传操作。
ArrayBuffer是es6才纳入正式ECMAScript规范，是js操作二进制数组的一个接口。以数组的语法处理二进制数据，也叫二进制数组。详情可看
https://es6.ruanyifeng.com/#docs/arraybuffer
介绍下概念
ArrayBuffer对象代表储存二进制数据的一段内存，不能直接读写，只能通过视图读写（TypedArray视图和DataView视图）视图作用是以指定格式解读二进制数据。
https://zhuanlan.zhihu.com/p/97711340

https://www.zhuyuntao.cn/js%E4%B8%ADarraybuffer%E4%B8%8Eblob%E7%9A%84%E5%8C%BA%E5%88%AB#ajax%E8%8E%B7%E5%8F%96

解析下载可以用js-file-download插件完成
使用步骤：
1、安装js-file-download

npm install js-file-download

然而可能会出现一种情况。第一次使用npm安装我的项目根本跑不起来。所以卸了使用yarn安装

npm uninstall js-file-download
yarn add js-file-download

2、引入

import fileDownload from 'js-file-download';
import Axios from 'axios'
import store from '@/store' // 获取token

3、使用

download() {
    var requestUrl = "tcmp/api/devices/model";
    var Authorization = store.state.user.token;
    Axios({
       method: 'get',
       url: requestUrl,
       headers: {
          'Authorization': Authorization
       },
           responseType: 'blob'
       }).then(res => {
           fileDownload(res.data, 'deviceModel.xlsx');
       });

上传

页面

<input ref="fileId"
       type="file"
       @change="handleUpload"
       multiple="multiple"
       class="file-btn"
       :disabled="isView||isResultApproval" />

接口

export const uploadFile = (p: Params) => $Http.Post(`/api/${System.SYSTEM_API}/affix/upload`, { params: p });

方法

handleUpload (data) {
  let obj = this.obj;
  console.log('obj', obj);
  let files = this.$refs.fileId.files[0];
  this.xlsxFile = files;
  this.fil_list = this.$refs.fileId.files;
  let oldLen = this.filLen;
  let len = this.fil_list.length + oldLen;
  if (len > 5) {
    alert('最多可上传5个文件，您还可以上传' + (5 - oldLen) + '张');
    return false;
  }
  for (let i = 0; i < this.fil_list.length; i++) {
    let size = Math.floor(this.fil_list[i].size / 1024);
    if (size > 30 * 1024) {
      alert('请选择30M以内的文件！');
      return false;
    }
  }
  if (this.xlsxFile === null) {
    this.$message({
      message: '请选择模板文件！',
      type: 'warning',
    });
    return false;
  }
  let fileName = this.xlsxFile.name;
  let pos = fileName.lastIndexOf('.');
  let lastName = fileName.substring(pos, fileName.length);
  let formdata = new FormData();
  console.log('this.$route.query.userInfo.userId', this.$route.query.userInfo.userId);
  formdata.append('fileId', this.obj.fileId);
  formdata.append('billRowId', this.baseInfo.id); //单据id
  formdata.append('bizType', 'RA'); //在哪个模块  例如MRB
  formdata.append('subBizType', 'RA_RES_JUDGE'); //节点状态、数据字典去看
  formdata.append('file', this.xlsxFile);
  formdata.append('userId', this.$route.query.userInfo.userId);
  let flag = true;
  for (let i = 0; i < this.baseInfo.affixList.length; i++) {
    if (this.baseInfo.affixList[i].name == this.$refs.fileId.files[0].name) {
      flag = false;
      alert('不能够上传相同的文件！');
      return flag;
    } else {
      flag = true;
    }
  }
  // console.log(flag)
  if (flag) {
    uploadFile(formdata).then(async res => {
      if (res.success) {
        this.filLen++;
        this.$refs.fileId.value = null;
        this.xlsxFile = null;
        let list = res.data || [];
        obj = {
          name: list.fileName,
          annexSize: list.fileSize,
          annexType: list.fileType,
          annexUser: list.updateBy,
          createDate: this.$dayjs(list.updateDate).format('YYYY-MM-DD HH:mm:ss'),
          annexId: list.uploadUserName,
          annexPath: list.saveFilePath,
          kind: 'W',
          id: list.id,
          targetname: 'http://' + window.location.host + '/' + list.saveFilePath,
        };
        this.baseInfo.affixList.push(obj); //上传文件数组
        // this.baseInfo.affixList = this.filesTableData;
      } else {
        this.xlsxFile = null;
      }
    });
  }
},