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并将文件名设置为第3个参数
fd.append(field, blob, filename)而不是附加文件

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

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

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

其他的是不同的是文件支持另外1个选项... lastModified
IE / Edge可以有文件，但构造函数不起作用。这就是你应该使用blob的原因......

＆＃13;

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)
})

＆＃13;

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

＆＃13;

Answer 2

啊，但是文件对象继承了Blob对象，所以它非常接近于相同。

但是，从下面的链接可以看出，编码和解码图像存在一些困难。

下面的代码显示了成功生成的文件“Blob”对象可用于生成下载图像的对象URL。

// https://bl.ocks.org/nolanlawson/0eac306e4dac2114c752 
let dataUrl = document.getElementById("img1").src.split(',')
let base64 = dataUrl[1];
let mime = dataUrl[0].match(/:(.*?);/)[1];
let bin = atob(base64);
let length = bin.length;
// From http://stackoverflow.com/questions/14967647/ (continues on next line)
// encode-decode-image-with-base64-breaks-image (2013-04-21)
let buf = new ArrayBuffer(length);
let arr = new Uint8Array(buf);
bin
  .split('')
  .forEach((e,i)=>arr[i]=e.charCodeAt(0));
  
let f = new File([buf],'filename',{type:mime}); // note: [buf]
let blobUrl = URL.createObjectURL(f);
let link = document.createElement("a"); 
link.href = blobUrl;
link.download = "filename";
link.innerHTML = "Download file.";
document.getElementById("url1").appendChild(link);

<img id="img1" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1klEQVR42n2TzytEURTHv3e8N1joRhZGzJsoCjsLhcw0jClKWbHwY2GnLGUlIfIP2IjyY2djZTHSMJNQSilFNkz24z0/Ms2MrnvfvMu8mcfZvPvuPfdzz/mecwgKLNYKb0cFEgXbRvwV2s2HuWazCbzKA5LvNecDXayBjv9NL7tEpSNgbYzQ5kZmAlSXgsGGXmS+MjhKxDHgC+quyaPKQtoPYMQPOh5U9H6tBxF+Icy/aolqAqLP5wjWd5r/Ip3YXVILrF4ZRYAxDhCOJ/yCwiMI+/xgjOEzmzIhAio04GeGayIXjQ0wGoAuQ5cmIjh8jNo0GF78QwNhpyvV1O9tdxSSR6PLl51FnIK3uQ4JJQME4sCxCIRxQbMwPNSjqaobsfskm9l4Ky6jvCzWEnDKU1ayQPe5BbN64vYJ2vwO7CIeLIi3ciYAoby0M4oNYBrXgdgAbC/MhGCRhyhCZwrcEz1Ib3KKO7f+2I4iFvoVmIxHigGiZHhPIb0bL1bQApFS9U/AC0ulSXrrhMotka/lQy0Ic08FDeIiAmDvA2HX01W05TopS2j2/H4T6FBVbj4YgV5+AecyLk+CtvmsQWK8WZZ+Hdf7QGu7fobMuZHyq1DoJLvUqQrfM966EU/qYGwAAAAASUVORK5CYII=">
<div id="url1"></div>

从img标记创建文件对象

2 个答案: