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

【问题标题】：What is the difference between file upload using FileReader and FormData?使用 FileReader 和 FormData 上传文件有什么区别？
【发布时间】：2021-01-31 05:47:20
【问题描述】：

有两种方法可以使用 Ajax (XHR2) 上传文件。首先，我可以将文件内容读取为数组缓冲区或二进制字符串，然后使用 XHR send 方法进行流式传输。比如shown here:

function uploadFile(img, file) {
  const reader = new FileReader();
  const xhr = new XMLHttpRequest();

  xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          const percentage = Math.round((e.loaded * 100) / e.total);
          // Do something with percentage
        }
      });

  xhr.upload.addEventListener("load", (e) => console.log('Do something more'));

  xhr.open("POST", "some-url");
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

  reader.onload = function(evt) {
    xhr.send(evt.target.result);
  };
  reader.readAsBinaryString(file);
}

其次，我可以使用FormData将我的文件上传为shown here：

var formData = new FormData();

// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);

var request = new XMLHttpRequest();

request.open("POST", "some-url");

request.send(formData);

这两种方法是否等效？使用FileReader 而不是FormData 有什么好处吗？一个比另一个性能更好吗？

【问题讨论】：

看起来像文件阅读器流，所以对于大文件更有用。

标签： javascript ajax filereader

【解决方案1】：

首先，您省略了第三个选项，即直接通过xhr.send(file) 发送文件，就像您对 ArrayBuffer 所做的那样。

话虽如此，首先通过 FileReader 读取内存中的文件并没有任何可能的优势。

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

通过 FileReader 读取文件时，您要求浏览器将完整文件读取到内存，然后当您通过 XHR 发送文件时，正在使用内存中的数据。因此，您受到可用内存的限制，无缘无故地膨胀它，甚至要求 CPU 在这里工作，而数据几乎可以直接从磁盘传输到网卡。

至于formdata.append(file); xhr.send(formdata);和xhr.send(file)有什么区别，基本上只有请求头。前者将请求包装为 multipart/form-data enctype 请求，而后者将按原样发送。
所以你会在接收端以不同的方式处理这两个请求。

【讨论】：