上传文件和前端离线下载请求
书接上文,我们这些切图仔,请求的大多数情况都是以json的方式发送,相信很少写过上传文件的请求吧。并且生成了文件前端如何在不请求服务器的情况下给用户下载。
上传文件
// 数据组成
// blod为文件的Blod格式的对象,第二个参数为File名称,不过不重要,用户下载下来的文件名不由这个决定
const file = new File([blod], `test.docx`);
// 生成formData对象
const formData = new FormData();
formData.append("file", file);
// 请求,request为axios实例
request({
url,
headers: { 'content-type': 'multipart/form-data' },
method: 'post',
data
});
File类
File类是一个描述文件的类,当用户使用input[type=file]的标签上传文件时,其中的值就是这个对象
FormData对象
当我们通过form标签发起请求的时候,其中的数据就是FormData对象,并且和我们常规请求不同的是,他的请求头应当添加上这么一条
'content-type': 'multipart/form-data'
然后通过append方法给其添加键值对即可
前端如何进行本地下载
在上文提到过需要在本地进行测试,把文件传回给后端再发起下载请求太麻烦了,为了能查看生成文档的效果,就需要在本地进行下载,我们可以通过a标签来进行触发
// 首先生成我们需要下载的File对象
// blod为文件的Blod格式的对象,第二个参数为File名称,不过不重要,用户下载下来的文件名不由这个决定
const file = new File([blod], `test.docx`);
// 生成一个临时资源定位符
const url = URL.createObjectURL(docFile);
// 利用a标签进行下载
const a = document.createElement("a");
// 将url赋值给a的href属性
a.href = url;
// download属性决定a标签点击之后的行为为下载对应资源到本地,其值为下载的文件名
a.download = "test.docx";
// 最后将其插入到document中,没记错的话没插入的话a.click()是不能触发的
document.body.appendChild(a);
a.click();
// 别忘了移除节点和释放url资源
a.remove();
URL.revokeObjectURL(url);
大概就是这样咯,有错误的话欢迎大佬指出!!