本文共 2333 字，大约阅读时间需要 7 分钟。

JS Blob对象：实现文件上传的创造性解决方案

前几日在公司的SpreadJS控件测试项目中遭遇了一道挑战：需要实现本地文件的自动选择，而不是通过传统的<input type="file">标签进行操作。由于模拟UI行为会占用大量测试时间，这一需求显得尤为必要。起初我深信这是不可能实现的，因为浏览器的安全机制阻止了JS直接访问本地文件（Node.js除外）。然而，IE浏览器支持FileSystemObject接口，而其他主要浏览器则不具备类似功能。因此，我决定尝试通过后端手段实现文件访问，然后将文件内容转换为Base64格式返回前端，从而通过脚本生成File对象。

方案思路概述

这一方案分为两大部分：后端操作和前端操作。

后端操作

后端语言（如Java、Python等）可以轻松地访问本地文件，将文件内容读取到字节数组中并进行Base64编码返回给前端。这一过程极其简单，对后端开发人员的工作量非常少。

前端操作

我需要接收后端返回的Base64字符串，并利用JavaScript生成一个符合实际文件类型的File对象。这一过程需要深入理解<input type="file">标签背后的工作原理。

input type="file"的工作原理

查阅W3C文档发现，每个<input type="file">标签会创建一个FileUpload对象，该对象包含一个文本输入字段（用于文件名输入）和一个文件选择按钮。点击“选择”后，浏览器会生成一个FileList，包含用户选择的文件。通过document.getElementById("uploadFile").files可以访问这个FileList。为了安全性，File对象仅提供文件的元数据，如修改时间、文件类型、大小、名称等，并不暴露实际文件内容。

创建File对象

JavaScript提供了Blob对象，它是一个包含原始数据的不可变对象。File对象继承自Blob并扩展了对文件类型的支持。Blob的构造函数接受两个参数：一个可选的数组（包含DOMString、TypedArray或Blob）和一个可选的属性包。

Base64转换与File对象生成

为了实现文件上传，我需要将后端返回的Base64字符串转换为Uint8Array类型的数组，然后利用Blob构造一个文件对象。Uint8Array用于处理二进制数据，通过脚本，可以很容易地将其转换为文件格式。Blob对象构造时需要指定文件的MIME类型，这一部分需要参考W3C的MIME类型手册。

将Base64字符串转换为Uint8Array的具体实现如下：

在实际应用中，我将上述步骤进行了封装，形成一个简单的函数，方便调用。

文件下载与测试

为了验证文件是否完整无损，我在前端通过生成下载链接的方式打开文件。由于IE浏览器的特殊性，我在代码中添加了针对IE的兼容处理，确保所有浏览器均能正确下载文件。

最终解决方案代码

function createFile(urlData, fileType) {    const bytes = window.atob(urlData),        n = bytes.length,        u8Arr = new Uint8Array(n);    for (let i = n - 1; i >= 0; i--) {        u8Arr[i] = bytes.charCodeAt(i);    }    return new Blob([u8Arr], { type: fileType });}const str = ''; // 后端返回的Base64字符串const fileName = 'SunnyChuan.xlsx';let fileBlob = createFile(str, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');if (navigator.appVersion.toString().indexOf('.NET') > 0) {    window.navigator.msSaveBlob(fileBlob, fileName);} else {    const a = document.createElement('a');    a.href = window.URL.createObjectURL(fileBlob);    a.download = fileName;    a.click();    document.body.appendChild(a);}

总结

通过对JS文件操作机制的深入理解，我们成功实现了直接指定文件的上传目标，而无需依赖传统的文件选择对话框。这一解决方案不仅能够显著提升测试效率，还为后续的文件处理操作提供了更大的灵活性。虽然JS本身不允许直接访问本地文件，但通过Base64编码和Blob对象，我们可以在一定程度上模拟文件操作的效果，这为后续的UI模拟测试奠定了坚实基础。

这一解决方案的核心价值在于通过后端生成，然后通过前端脚本生成虚拟文件的方式，既保证了安全性，又满足了业务需求。这一方法在实际项目中可以广泛应用，尤其是当需要频繁上传或下载文件时。

转载地址：http://pdymz.baihongyu.com/