javascript - 在javascript中引用文件上传

Question

我想我知道这是一个“不”，但我还是要问:

我有一个 SPA( react )，用户发送了要修复的项目。我正在尝试获取它，以便用户可以为其元素拍照以进行识别。

我希望创建一个数据集合来在整个应用程序中进行操作，如下所示:

const repairs = [
  {name: 'item1', imgURL: '<reference to local file in some way>'},
  {name: 'item2', imgURL: '<reference to other local file in some way>'}
];

为了获取数据，我将使用一个表单(显然!)。实际上，用户输入数据的表单应该使用文件上传，对吗？!像这样:

<form id="myForm">
    <input type="file" name="avatar" id="avatar">
    <input type="text" name="name" id="name">
    <input type="submit">
</form>

使用 FormData API，我可以获得该文件的引用并将其显示在该页面上。问题实际上在于保留该引用。

在另一页上，我可能需要一份维修项目列表，如下所示:

<li className="repair">
  <img src={repair.imgURL} alt={repair.name} />
</li>

但问题是如何持久化并引用文件路径...

编辑:抱歉，更清楚地说，我了解本地存储。我的问题是获取文件的引用。当您获取 FormData 对象时，文件数据如下所示:

File {
  name: "BB_map_pin_black.png",
  lastModified: 1491366453000,
  lastModifiedDate: Wed Apr 05 2017 05:27:33 GMT+0100 (BST), 
  webkitRelativePath: "", size: 1516…
}

...这不足以在另一个页面上引用它。我需要一个文件路径，或者让系统保存对该文件位置的某种引用，因为上面对象中列出的文件位于我的下载文件夹中，而不是我的项目当前所在的文件夹中...

Answer 1

文件没有 JS 可访问的路径属性，因为这可能会向网站运营商泄露用户名和其他 secret /个人信息。此外，一旦重新加载页面，您就会丢失文件引用；拥有完整路径没有帮助，因为您仍然没有对 File 的引用对象，并且您无法预填充 <input type=file> 。您可以保存文件的内容和名称，但不能保存路径。如果您将文件上传到您的服务器，您可以让您的服务器返回一个可以从任何页面链接的 URL。