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)}},