javascript - 从 img 标签创建一个文件对象

Question

假设我有一个带有 base64 src 的 img 标签，例如:

<img src="data:image/jpeg;base64,/9j/4AAQS..." id="id">

如何创建一个 File 对象(包含 img 标签的数据)，就像用户从文件输入中选择文件后得到的对象一样？以便稍后将其上传到服务器。

像那个:

File { name: "a22919a70cf8458d654642e0bc2cd881.jpg", lastModified: 1521393615000, lastModifiedDate: Date 2018-03-18T17:20:15.000Z, webkitRelativePath: "", size: 40635, type: "image/jpeg" }

我不希望获得 BLOB。

Answer 1

您始终可以先创建一个 blob，然后将其转换为文件。

但是您几乎不需要 File 实例。尝试构建它们然后仅使用 blob 会让您更加头疼。如果您需要将它们上传到服务器，您需要使用 FormData。当你这样做时，你可以附加一个 blob 并将文件名设置为第三个参数
fd.append(field, blob, filename) 而不是附加一个文件

文件构造函数参数与 blob 相同，除了在文件名中传递的 parts 和 options 之间。

File 对象继承了 Blob 对象，因此您也可以在其他 api 中以相同的方式使用它们

new File([parts], filename, options)
new Blob([parts], options)

另一件事是，不同的是文件支持 1 个更多选项... lastModified
IE/Edge 可以有文件，但构造函数不起作用。这就是为什么你应该使用 blob...

const img = document.getElementById('id')

fetch(img.src)
.then(res => res.blob())
.then(blob => {
  const file = new File([blob], 'dot.png', blob)
  console.log(file)
})

<img id="id" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">