前端如何进行上传文件和前端离线下载的操作

111 阅读2分钟

上传文件和前端离线下载请求

书接上文,我们这些切图仔,请求的大多数情况都是以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);

大概就是这样咯,有错误的话欢迎大佬指出!!