在javascript中引用文件上传

Question

我想我知道这是“不”，但我还是要问：

我有一个SPA（反应），并且用户发送了要维修的物品。 我正在尝试获取它，以便用户可以为其商品拍照以进行识别。

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

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

您可能需要查看localStorage来存储filePath

localStorage属性允许您访问本地存储对象。 localStorage与sessionStorage类似。 唯一的区别是，尽管存储在localStorage中的数据没有到期时间，但是在浏览会话结束时（即，在关闭浏览器时），存储在sessionStorage中的数据将被清除。

存放路径

localStorage.setItem('filePath', 'YOUR_PATH');

读取路径

var file_path = localStorage.getItem('YOUR_PATH');

您也可以通过对对象进行字符串化存储。

localStorage.setItem('formData', JSON.stringify(YOUR_FORM_DATA_OBJ));

在读取解析为对象时

var YOUR_FORM_DATA_OBJ = JSON.parse(localStorage.getItem('formData'));

更新

查看这个小提琴

由于安全性问题，您无法读取文件的路径

但您可以将文件转换为Blob dataURL并将其保存在localStrorage中

在上面的小提琴中，我使用图像存储在本地存储中，并在以后显示它们。

存储文件

avatar = input.files[0];    //Read your input file here
var reader  = new FileReader();   //create a FileReader Object 

reader.addEventListener("load", function () { // A listener to read the file as blob
  var data = reader.result; // Your blob data

  // Saving the blob data to localStorage
  localStorage.setItem('fileData', // Key and object storing name and blob data of file
                        JSON.stringify({name:avatar.name,data:data})); 
  }, false);

  if (avatar) {
    // reading file to get blob, this will call the load method above
    reader.readAsDataURL(avatar);
  }

读取文件

var fileData = localStorage.getItem('fileData');  // getting data from local storage

   if(fileData) {
    fileData = JSON.parse(fileData);      // parsing local storage data
    avatar=dataURLtoFile(fileData.data,"filename"); //converting dataURL to file

}

/*Function to convert blob dataURL and returns a file object
  Takes a dataURL (data:image/png;base64,sadasd...) and filename
  and returns a file object
*/
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

全JS

window.input = $('#myForm').find('#avatar')[0];
window.preview = $('#show');
window.avatar;

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

function changeFile() {

  avatar = input.files[0];    //Read your input file here
  var reader  = new FileReader();   //create a FileReader Object

  var path = URL.createObjectURL(avatar); //Create URL to show current image
  preview[0].src=path;  // set url of blob to image src (just to preview current image)

  reader.addEventListener("load", function () { // A listener to read the file as blob

  var data = reader.result; // Your blob data

  // Saving the blob data to localStorage
  localStorage.setItem('fileData', // Key to store
                        JSON.stringify({name:avatar.name,data:data})); // an object storing name and blob data of file
  }, false);

  if (avatar) {
    reader.readAsDataURL(avatar);  // reading file to get blob, this will call the load method above
  }

}

input.addEventListener('change', changeFile); // adding change listener to input 

window.init = function(){ // called on page load

   var fileData = localStorage.getItem('fileData');  // getting data from local storage

   if(fileData) {
    fileData = JSON.parse(fileData);      // parsing local storage data
    avatar=dataURLtoFile(fileData.data,"filename"); converting dataURL to file
    var path = URL.createObjectURL(avatar);// getting a url to show the image
    preview[0].src=path; // setting url to image
   }


}

init();

Answer 2

文件没有JS可访问的路径属性，因为它可以向站点的操作员显示用户名和其他机密/个人信息。 另外，重新加载页面后，您还会丢失文件引用； 它没有完整路径，因为您仍然没有对File对象的引用，并且您无法预先填充<input type=file> 。 您可以保存文件的内容和名称 ，但不能保存path 。 如果将文件上传到服务器，则可以让服务器返回可以从任何页面链接的URL。