使用JavaScript將url轉換為文件對象

Question

我已經使用FileReader將圖像轉換為dataurl ，它給出了如下輸出：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBl…Vp1m8u4+SV/s0TpD8+91R/3Xlf8sXZv9Y9OGLk5eyVnCNu19Ntdu2jYOnaHtG7ffb7t/uP/9k=

這是一個非常長的字符串..

現在我再次想將它轉換為文件對象，以便我可以發布此圖像。

如何再次將此圖像轉換為文件對象

Answer 1

將dataurl轉換為File對象

• https://jsfiddle.net/fn2aonwy/

---

var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], { type: 'image/jpeg' });
var file = new File([blob], "image.jpg");

基於@ William-t回答/關於stackoverflow.com/questions/4998908/的更多討論

MDN blob 文件

Blob對象表示不可變的原始數據的類文件對象。 Blob表示不一定采用JavaScript本機格式的數據。 File接口基於Blob，繼承blob功能並將其擴展為支持用戶系統上的文件。

---

MDN FormData

var form = new FormData(),
    request = new XMLHttpRequest();

form.append("image", blob, "myimage.jpg");
request.open("POST", "/upload", true);
request.send(form);

Answer 2

您可以使用fetch將url轉換為File對象。

//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance

function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}


//usage example: (works in Chrome and Firefox)

srcToFile(
    'data:image/gif;base64,R0lGODlhDgANAKIAAAAAAP///9HV2U5RU////wAAAAAAAA'
    + 'AAACH5BAEAAAQALAAAAAAOAA0AAAMXSLrc/hCO0Wa1atJLtdTbF0ZjZJ5oyiQAOw==',
    'arrow.gif',
    'image/gif'
)
.then(function(file){
    console.log(file);
})