html - Hvordan konvertere en Base64-streng til et JavaScript-filobjekt på samme måte som fra et filinnsats-skjema?

Jeg vil konvertere Base64-strengen hentet fra en fil (f.eks.: "AAAAA....~") til et JavaScript-filobjekt.

Javascript-filobjektet, det jeg mener, er som denne koden:

HTML :

<input type="file" id="selectFile" >

JS :

$('#selectFile').on('change', function(e) {
  var file = e.target.files[0];

  console.log(file)
}

‘file’-variabelen er et JavaScript-filobjekt. Så jeg vil konvertere en base64-streng til JavaScript-filobjektet på den måten.

Jeg vil bare få filobjektet ved å dekode en base64-streng (kodet av en annen app fra en fil) uten HTML-filopplastingsskjema.

Takk.

Svar #1

Måte 1: fungerer bare for dataURL, ikke for andre typer URL.

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

//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8=','hello.txt');
console.log(file);

Måte 2: fungerer for alle typer URL, (http URL, dataURL, blobURL, osv...)

// return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
    if (url.startsWith('data:')) {
        var arr = url.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[arr.length - 1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var file = new File([u8arr], filename, {type:mime || mimeType});
        return Promise.resolve(file);
    }
    return fetch(url)
        .then(res => res.arrayBuffer())
        .then(buf => new File([buf], filename,{type:mimeType}));
}

//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8=', 'hello.txt','text/plain')
.then(function(file){ console.log(file);});

Svar #2

const url = 'data:image/png;base6....';
fetch(url)
  .then(res => res.blob())
  .then(blob => {
    const file = new File([blob], "File name",{ type: "image/png" })
  })

Base64-streng -> Blob -> Fil.

Svar #3

Dette er den nyeste async/await-mønsterløsningen.

export async function dataUrlToFile(dataUrl: string, fileName: string): Promise<File> {

    const res: Response = await fetch(dataUrl);
    const blob: Blob = await res.blob();
    return new File([blob], fileName, { type: 'image/png' });
}

Relaterte artikler