Javascript 使用FileReader和FormData上传文件有什么区别？

使用Ajax（XHR2）上传文件有两种方法。首先，我可以将文件内容读取为数组缓冲区或二进制字符串，然后使用XHR

send

方法进行流式传输。例如：

函数上传文件（img，文件）{
const reader=new FileReader（）；
const xhr=new XMLHttpRequest（）；
xhr.upload.addEventListener（“进度”，函数（e）{
if（如长度可计算）{
常数百分比=数学四舍五入（（e.loaded*100）/e.total）；
//用百分比做某事
}
});
xhr.upload.addEventListener（“加载”，e）=>console.log（“做更多的事”）；
xhr.open（“POST”，“someurl”）；
xhr.overrideMimeType（'text/plain；charset=x-user-defined-binary'）；
reader.onload=函数（evt）{
发送（evt.target.result）；
};
reader.readAsBinaryString（文件）；
}

其次，我可以使用

FormData

将我的文件上传为：

var formData=new formData（）；
//HTML文件输入，由用户选择
formData.append（“userfile”，fileInputElement.files[0]）；
var request=new XMLHttpRequest（）；
打开（“POST”，“someurl”）；
请求。发送（formData）；

---

这两种方法等效吗？使用

FileReader

而不是

FormData

有什么好处吗？一个比另一个性能好吗？

首先，您忽略了第三个选项，即直接通过

xhr.send（File）

发送文件，就像使用ArrayBuffer一样

也就是说，首先通过FileReader读取内存中的文件不存在任何可能的优势

---

从磁盘上的文件上载文件时，浏览器不会将完整文件加载到内存中，而是通过请求将其流式传输。这就是你如何上传GIG的数据，即使它不适合内存。这对HDD也更友好，因为它允许其他进程在每个块之间访问它，而不是锁定它

当通过文件读取器读取文件时，您要求浏览器将完整的文件读取到内存中，然后当您通过XHR发送文件时，内存中的数据正在被使用。因此，您受到可用内存的限制，没有充分的理由导致内存膨胀，甚至要求CPU在此工作，而数据几乎可以直接从磁盘传输到网卡

---

至于

formdata.append（文件）之间的区别是什么；xhr.send（formdata）

和

xhr.send（文件）

，基本上只有请求头。前者将请求包装为多部分/表单数据类型请求，而后者将按原样发送。

---

因此，您可以在接收端以不同的方式处理这两个请求。

看起来像文件读取器流，因此对于大型文件更有用。