vue2+ant（上传+下载）

下载（导出）

第一步——封装的axios

导出必须加responseType: 'blob'
它是一个常用于 XMLHttpRequest 或 fetch API 的选项，它指定了响应的类型。当设置为 ‘blob’ 时，这意味着预期服务器返回的是一个二进制大对象（Blob），通常用于处理二进制数据，如文件下载。

// 数据导出
**
 * @param parameter 传入的请求参数|若没有参数可在实参传null或不穿
 */
export function Download(parameter) {
  return axios({
    url: 'xxx/xxx',
    method: 'post',
    responseType: 'blob',
    data: parameter
  })
}

第二步——template

 <a-button type="primary"  @click="exporthomeList">导出</a-button>

第三步——methods

	// 引入api文件
	import * as info from '@/api/dashboard'
	// 表格数据以excel文件的格式导出
    exporthomeList() {
      const params = {
        pageSize: this.pageSize,
        search: this.search
      }
    this.HandeleDownloadClick('对应的api接口也就是第一步的`Download`', params, '要素数据信息')
    },
	/**封装导出方法
	 * @param requestName 接口名称
	 * @param params 接口请求参数
	 * @param fileName 导出的文件名称
	 */
    HandeleDownloadClick(requestName, params, fileName) {
      if (requestName == null || !requestName.length) {
        return
      }
      info[requestName](params)
        .then(res => {
          const link = document.createElement('a') //创建a标签
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
          link.style.display = 'none'
          // 设置连接
          link.href = URL.createObjectURL(blob) //将文件流转化为blob地址
          link.download = fileName + '.xlsx'
          document.body.appendChild(link)
          // 模拟点击事件
          link.click() //设置点击事件
          document.body.removeChild(link)
        })
        .catch(err => {
          message.error('导出失败')
        })
    },

上传（导入）

第一步——封装的axios

导出必须加r'Content-Type': 'multipart/form-data'
‘Content-Type’: ‘multipart/form-data’ 是一种 HTTP 请求头部类型，它指示请求的数据将由多部分/表单数据组成。在实际应用中，它通常用于文件上传等场景，将文件作为请求的一部分发送到服务器。

// 上传文件、照片、表单信息
export function Upload(parameter) {
  return axios({
    url: 'xxx/xxx',
    method: 'post',
    Headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: parameter
  })
}

第二步——template

<a-upload
  :fileList="fileList" // 文件绑定的属性
  name="file"
  :before-upload="beforeUpload" // 选择文件后的事件
  action="" // 自动上传地址，手动上传可以不填设置为空
  :multiple="false" // 不能多选只能选一个
>
  <a-button type="primary">导入</a-button>
</a-upload>

第三步——methods

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

 //选择文件后的事件——默认参数为选择的文件
  beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      this.importMatters()
    },
    // 导入
    async importMatters() {
    // new FormData() 创建表单格式的数据例如：文件、照片、表单信息
      let formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('file', file)
      })
      var res = await Upload(formData)
      if (res.code == 200) {
        this.fileList = []
        message.success(res.message)
      } else {
        this.fileList = []
        message.error(res.message)
      }
    },

数据信息是以表单格式不是我们普通的对象格式