javascript - 我们如何从 Javascript File 对象知道文件的内容？

Question

我在网上找到的一种常见的异步文件上传方法如下:

myUpload(ev) {
  ev.preventDefault();

  const data = new FormData();
  data.append('file', this.uploadInput.files[0]);

  /* Do the upload with something like axios */ 
  axios.post('http://localhost:8000/upload', data)
    . ...
}

我无法解释以下内容:

• 对象 this.uploadInput.files[0] 是一个 File JavaScript 对象。
• 从我能找到的文档(例如 this )以及我在控制台上尝试的日志来看，javascript File 对象既不存储文件内容，也不存储文件路径。

那么，FormData对象如何获取我们想要发送的文件数据呢？

Answer 1

FormData 可能不会，但浏览器会这样做，因为当 axios 向浏览器的 ajax 功能( XHR 或 fetch )提供 FormData 对象时，浏览器可以使用 File 对象中的数据来读取和发送文件。

您自己的 JavaScript 代码也可以使用 File 对象中的数据来读取文件，使用 FileReader (另一个浏览器提供的功能)。

File 并不直接包含文件的数据，但它确实包含浏览器可用于读取文件的信息(而不会将其实际位置暴露给代码)。

<小时/>

¹ 可能不是字面上的在 File 对象中。更有可能的是，两者之间使用浏览器私有(private)数据建立间接关系。