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

Question

我可以通过两种方式使用 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 ?一个比另一个更高效吗？

Answer 1

首先，您省略了第三个选项，即直接通过 xhr.send(file) 发送文件。就像你对 ArrayBuffer 所做的那样。
话虽如此，首先通过 FileReader 读取内存中的文件不存在任何可能的优势。

从磁盘上的文件上传文件时，浏览器不会在内存中加载完整文件，而是通过请求将其流式传输。即使数据不适合内存，您也可以通过这种方式上传数据。这对 HDD 也更友好，因为它允许其他进程在每个块之间访问它而不是锁定它。
通过 FileReader 读取文件时，您要求浏览器读取 全文件到内存，然后当你通过 XHR 发送它时，内存中的数据正在被使用。因此，您受到可用内存的限制，无缘无故地使内存膨胀，甚至要求 CPU 在这里工作，而数据几乎可以直接从磁盘传输到网卡。

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