2024大厂Web前端面试必问题目，一文了解文件上传全过程（项目中碰到的难点，【限时】

1.直接使用 blob 上传

const json = { hello: “world” };

const blob = new Blob([JSON.stringify(json, null, 2)], { type: ‘application/json’ });

const form = new FormData();

form.append(‘file’, blob, ‘1.json’);

axios.post(‘http://localhost:7787/files’, form);

2.使用 File 对象，再进行一次包装（File 兼容性可能会差一些  https://caniuse.com/#search=File）

const json = { hello: “world” };

const blob = new Blob([JSON.stringify(json, null, 2)], { type: ‘application/json’ });

const file = new File([blob], ‘1.json’);

form.append(‘file’, file);

axios.post(‘http://localhost:7787/files’, form)

ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

虽然它用的比较少，但是他是最贴近文件流的方式了。

在浏览器中，他每个字节以十进制的方式存在。我提前准备了一张图片。

const bufferArrary = [137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,1,3,0,0,0,37,219,86,202,0,0,0,6,80,76,84,69,0,0,255,128,128,128,76,108,191,213,0,0,0,9,112,72,89,115,0,0,14,196,0,0,14,196,1,149,43,14,27,0,0,0,10,73,68,65,84,8,153,99,96,0,0,0,2,0,1,244,113,100,166,0,0,0,0,73,69,78,68,174,66,96,130];

const array = Uint8Array.from(bufferArrary);

const blob = new Blob([array], {type: ‘image/png’});

const form = new FormData();

form.append(‘file’, blob, ‘1.png’);

axios.post(‘http://localhost:7787/files’, form)

这里需要注意的是 new Blob([typedArray.buffer], {type: 'xxx'})，第一个参数是由一个数组包裹。里面是 typedArray 类型的 buffer。

Base64

const base64 = ‘iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEUAAP+AgIBMbL/VAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAACklEQVQImWNgAAAAAgAB9HFkpgAAAABJRU5ErkJggg==’;

const byteCharacters = atob(base64);

const byteNumbers = new Array(byteCharacters.length);

for (let i = 0; i < byteCharacters.length; i++) {

byteNumbers[i] = byteCharacters.charCodeAt(i);

}

const array = Uint8Array.from(byteNumbers);

const blob = new Blob([array], {type: ‘image/png’});

const form = new FormData();

form.append(‘file’, blob, ‘1.png’);

axios.post(‘http://localhost:7787/files’, form);

关于 base64 的转化和原理可以看这两篇 base64 原理[4] 和

原来浏览器原生支持JS Base64编码解码[5]

小结

对于浏览器端的文件上传，可以归结出一个套路，所有东西