Question

我有一个文件上传，可以将图像保存为服务器上的.png和mysql数据库中的链接。为了在上传之前显示图像的缩略图，我有一个将文件列表对象转换为预览图片的功能。现在我希望用户稍后编辑文件选择。为此，我需要以缩略图的形式从服务器加载图像。我认为最好的方法是将存储在数据库中的文件路径转换为文件对象，并将此对象应用于创建缩略图的函数，我不需要重写此函数。所以我的问题是如何将存储的图像链接转换为文件列表对象？

修改

上传：

user selection -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> upload selection as base 64 to server -> base 64 to .png -> save pic -> save link

以后编辑用户选择（怎么办？）：

saved link -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> ...

已保存的链接 - ＆gt;文件对象 怎么办？可能？更好的方法？我希望现在更清楚了解。

如果有人知道如何做或更好的方式，请回答。

（我知道你在提问时应该显示Code，但我不认为在这里上传整个上传功能是必要的）

Answer 1

你的过程全是皱眉，所以我可能无法正确回答你的问题，但我很确定这是一个X-Y问题。

Javascript File对象继承自Blob对象。

来自MDN：

File对象是一种特定类型的Blob，可以在Blob可以使用的任何上下文中使用。

从不将文件转换为base64 dataURL，如果要将其转换回Blob;这没有任何意义，只会污染浏览器的内存。

要在浏览器中显示Blob（或文件），请从媒体元素或iframe中使用URL.createObjectURL(blob)方法。这将返回一个blobURI，它仅在启动页面的生命周期内可用，并且仅适用于用户的浏览器。如果用户上传了文件，该文件甚至不会被复制到内存中，并且返回的uri只是指向用户系统上文件的直接指针。

inp.onchange = function(){
  var url = URL.createObjectURL(this.files[0]);
  var img = new Image();
  img.onload = function(){
      document.body.appendChild(this);
    }
  img.onerror = function(){
      console.log('probably not a supported image file');
    }
  img.src = url;
  }

<input id="inp" type="file" accept="image/*">

如果需要修改图像，可以通过在画布上绘制生成的图像来实现然后，不是将画布导出到dataURI，而是直接使用toBlob方法，be polyfilled。

要在服务器上向您发送文件/ Blob，请直接发送文件/ Blob，而不是其重量超过30％的base64字符串表示。
由于FormData API，这可以很容易地完成。

var xhr = new XMLHttpRequest();
xhr.onload = done;
var formData = new FormData();
formData.append('file', theFile, fileName);
xhr.open('POST', yourServer);
xhr.send(formData);

然后，您可以检索服务器端，就像通过基本的Multipart / Form方法上传的任何文件一样。

javascript将图像路径转换为文件（列表）对象

1 个答案: