wake-up-neo.net

Wie konvertiert man Base64 String in ein JavaScript-Dateiobjekt wie aus dem Dateieingabeformular?

Ich möchte Base64String aus einer Datei extrahieren (z. B. "AAAAA .... ~") in ein Javascript-Dateiobjekt konvertieren.

Das Javascript-Dateiobjekt, was ich meine, ist wie folgt: 

HTML:

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

JS:

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

  console.log(file)
}

Die 'Datei'-Variable ist ein Javascript-Dateiobjekt. Ich möchte also eine base64-Zeichenfolge in das Javascript-Dateiobjekt konvertieren.

Ich möchte nur das Dateiobjekt durch Dekodierung der base64-Zeichenfolge (kodiert von einer anderen App aus einer Datei) ohne HTML-Dateieingabeformular erhalten.

Vielen Dank.

15
Dayamre

Weg 1: funktioniert nur für dataURL, nicht für andere URL-Typen.

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[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,aGVsbG8Gd29ybGQ=', 'hello.txt');
console.log(file);

Weg 2: funktioniert für jeden URL-Typ (http-URL, dataURL, blobURL usw.)

//return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], filename, {type:mimeType});})
    );
}

//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8Gd29ybGQ=', 'hello.txt', 'text/plain')
.then(function(file){
    console.log(file);
})
43
cuixiping
const url = 'data:image/png;base6....';
fetch(url)
  .then(res => res.blob())
  .then(blob => {
    const file = new File([blob], "File name")
  })

Base64 String -> Blob -> Datei.

17
Preethi Kumar

Ich hatte eine sehr ähnliche Anforderung (beim Importieren eines base64-codierten Bildes aus einer externen XML-Importdatei. Nachdem ich die xml2json-light-Bibliothek zur Konvertierung in ein Json-Objekt verwendet hatte, konnte ich die Erkenntnisse aus der obigen Antwort von Cuixiping zur Konvertierung des eingehenden Objekts nutzen b64-codiertes Bild in ein Dateiobjekt.

const imgName = incomingImage['FileName'];
const imgExt = imgName.split('.').pop();
let mimeType = 'image/png';
if (imgExt.toLowerCase() !== 'png') {
    mimeType = 'image/jpeg';
}
const imgB64 = incomingImage['[email protected]'];
const bstr = atob(imgB64);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}
const file = new File([u8arr], imgName, {type: mimeType});

Mein eingehendes Json-Objekt hatte nach der Konvertierung durch xml2json-light zwei Eigenschaften: FileName und _ @ ttribute (dies waren b64-Bilddaten im Hauptteil des eingehenden Elements.) Ich musste den Mime-Typ basierend auf der eingehenden FileName-Erweiterung generieren. Nachdem ich alle Teile aus dem json-Objekt extrahiert/referenziert hatte, war es eine einfache Aufgabe (mithilfe der von cuixiping bereitgestellten Codereferenz), das neue File-Objekt zu generieren, das vollständig mit meinen vorhandenen Klassen kompatibel war und ein von dem Browser-Element generiertes Dateiobjekt erwartete .

Hoffe, das hilft, die Punkte für andere zu verbinden.

0
JHBSA

Kopf hoch,

JAVASCRIPT

<script>
   function readMtlAtClient(){

       mtlFileContent = '';

       var mtlFile = document.getElementById('mtlFileInput').files[0];
       var readerMTL = new FileReader();

       // Closure to capture the file information.
       readerMTL.onload = (function(reader) {
           return function() {
               mtlFileContent = reader.result;
               mtlFileContent = mtlFileContent.replace('data:;base64,', '');
               mtlFileContent = window.atob(mtlFileContent);

           };
       })(readerMTL);

       readerMTL.readAsDataURL(mtlFile);
   }
</script>

HTML

    <input class="FullWidth" type="file" name="mtlFileInput" value="" id="mtlFileInput" 
onchange="readMtlAtClient()" accept=".mtl"/>

Dann hat mtlFileContent Ihren Text als dekodierten String!

0
jimver04