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

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 文件对象既不存储文件内容，也不存储文件路径。

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

Answer 1

FormData 可能不会，但是浏览器会，因为当 axios 向浏览器的 ajax 特性（XHR or fetch）提供 FormData 对象时，浏览器可以使用 File 对象中的数据读取和发送文件。

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

File 不直接包含文件数据，但它确实包含浏览器可用于读取文件的信息（无需将其实际位置暴露给您的代码）。

¹ 可能不是在 File 对象中的字面意思。更有可能是两者之间使用浏览器私有数据的间接关系。

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

How can we know the content of a file from a Javascript File object?

javascript

form-data