1.上传文件
使用new FormData()
FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。
// 假设有一个<input type="file" id="fileInput">用于选择文件
const fileInput = document.getElementById('fileInput');
// 当文件选择发生变化时
fileInput.addEventListener('change', function() {
// 创建一个FormData实例
let formData = new FormData();
// 将文件添加到FormData对象中
const file = fileInput.files[0];
formData.append("file", file);
// 使用axios API发送请求
axios({
url: "/uploadFile",
method: "post",
data: formData
}).then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));
});
2.下载文件
使用new Blob()
new Blob()是JavaScript中的一个构造函数,用于创建Blob对象。Blob(Binary Large Object)是一种表示不可变、原始数据的类文件对象。它可以存储二进制数据或文本数据,并且可以代表各种类型的数据,例如图片、音频、视频、压缩文件等。
// 假设获取到文件路径或获取文件api接口为fileUrl
axios({
url: fileUrl,
method: "get",
responseType: "blob"
}).then((res) => {
let filestream = res.data; // 此处根据接口具体返回数据获取文件流数据
// 使用new Blob()将文件流转换为文件Blob对象
let blob = new Blob([filestream], { type: filestream.type });// 指定文件MIME类型
// 动态创建一个<a>标签,并设置其href属性为Blob对象的URL,该URL通过URL.createObjectURL()方 法生成。
let a = document.createElement("a");
let href = window.URL.createObjectURL(blob);
a.href = href;
// a.download = fileName; // 为<a>标签设置download属性,指定下载文件的名称。
// 通过模拟点击<a>标签,触发文件下载
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 下载完成后,调用URL.revokeObjectURL()方法释放Blob对象的URL,以避免内存泄漏。
window.URL.revokeObjectURL(href);
})