前言
台风天在家回顾一文件下载和上传功能的实现！
文件下载
点击按钮下载一个文件，一个出现频率极高的业务场景。
我们需要设置response Header中responseType，告诉后端我们需要的数据类型
export const getCartTemplate = () =>
defHttp.get({
url: Api.api_get_cart_template,
// 确保获取类型正确的数据
responseType: 'blob',
headers: {
ignoreCancelToken: true,
},
});
获取数据后，创建a标签进行自动点击:
// 这里的res即返回数据
const saveFile = (res) => {
let blob = new Blob([res], {
// 为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type 这里指定为.xlsx
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
});
// 创建一个临时的url指向blob对象
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
// 自定义文件名
a.download = fileName.value;
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
};
关于Blob对象:
Blob(blobParts[, options])
- blobParts： 数组类型， 数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。
- options： 可选项，字典格式类型，可以指定如下两个属性：
type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。
endings， 默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： “native”，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； “transparent”，表示会保持blob中保存的结束符不变。
type类型参考：
| Ext | MIME Type |
|---|---|
| .doc | application/msword |
| .dot | application/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
| .docm | application/vnd.ms-word.document.macroEnabled.12 |
| .dotm | application/vnd.ms-word.template.macroEnabled.12 |
| .xls | application/vnd.ms-excel |
| .xlt | application/vnd.ms-excel |
| .xla | application/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
| .xlsm | application/vnd.ms-excel.sheet.macroEnabled.12 |
| .xltm | application/vnd.ms-excel.template.macroEnabled.12 |
| .xlam | application/vnd.ms-excel.addin.macroEnabled.12 |
| .xlsb | application/vnd.ms-excel.sheet.binary.macroEnabled.12 |
| .ppt | application/vnd.ms-powerpoint |
| .pot | application/vnd.ms-powerpoint |
| .pps | application/vnd.ms-powerpoint |
| .ppa | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| .potx | application/vnd.openxmlformats-officedocument.presentationml.template |
| .ppsx | application/vnd.openxmlformats-officedocument.presentationml.slideshow |
| .ppam | application/vnd.ms-powerpoint.addin.macroEnabled.12 |
| .pptm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .potm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .ppsm | application/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
文件上传（基于ant-design-vue）
在点击按钮后上传文件，携带文件密码，密码可以为空！
模板部分：
<a-upload
name="file"
accept=".xls,.xlsx"
:file-list="fileList"
:showUploadList="true"
:withCredentials="true"
:headers="headers"
:before-upload="beforeUpload"
:disabled="loading"
:remove="handleRemove"
>
<a-button>
<SvgIcon name="upload" v-show="!loading" />
{
{ title }}
</a-button>
</a-upload>
其实就是手动上传，在antd的文档中已有示例： ant-design-vue upload组件.
简单描述就是需要在自动上传的基础上，添加两个参数：
| 参数 | 说明 | |
|---|---|---|
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。 | (file, fileList) => boolean |Promise |
| fileList | 已经上传的文件列表（受控） | object[ ] |
在beforeLoad中存储用户上传的文件，此时还没有真正上传：
// 上传前
const beforeUpload = (file: FileItem) => {
console.log(file, ' file ');
fileList.value = [file];
return false;
};
点击上传时：
const loading = ref(false);
// 上传
const handleUpload = async () => {
if (!fileList.value.length) {
message.error('Please upload first');
return;
}
// 使用formData格式传递参数
const fd = new FormData();
fd.append('file', fileList.value[0]);
fd.append('pwd', pwd.value);
loading.value = true;
try {
// 发送请求
const res = await importCart(fd);
if (res.success) {
// success
} else {
// fail
} catch (err) {
console.log(err);
} finally {
loading.value = false;
}
};
之前由自动改为手动时，模仿了antd的content-type参数，去掉后发现并无影响：
export const importCart = (params) =>
defHttp.post({
url: Api.api_import_cart,
params,
// 使用antd自动上传时的 response header
'Content-Type': 'application/octet-stream',
headers: {
ignoreCancelToken: true,
// 使用antd自动上传时的 request header
'Content-Type': 'multipart/form-data',
},
});
以上！