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代码还可以使用FileReader（另一个浏览器提供的功能）使用File对象中的数据来读取文件。

File不直接包含文件的数据，但确实包含浏览器可以用来读取文件的信息（而不会在代码中暴露其实际位置）。

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

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

1 个答案: