js 上传及下载文件

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