web-dev-qa-db-fra.com

Comment convertir Base64 String en objet fichier javascript comme à partir du formulaire de saisie de fichier?

Je veux convertir Base64String extrait du fichier (ex: "AAAAA .... ~") en un objet fichier javascript.

L'objet fichier javascript que je veux dire ressemble à ce code: 

HTML:

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

JS:

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

  console.log(file)
}

La variable 'fichier' est un objet fichier javascript. Je souhaite donc convertir une chaîne en base64 en un objet fichier javascript comme celui-ci.

Je veux juste obtenir un objet fichier en décodant une chaîne base64 (encodée par une autre application à partir d'un fichier) sans formulaire d'entrée de fichier html.

Je vous remercie.

javascripthtmlformsfilebase64
15
Dayamre

Voie 1: ne fonctionne que pour dataURL, pas pour d'autres types d'URL.

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

Way 2: fonctionne pour tout type d'URL (http, URL, dataURL, blobURL, etc ...)

//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 -> Fichier.

17
Preethi Kumar

J'avais une exigence très similaire (importer une image codée en Base64 à partir d'un fichier d'importation XML externe. Après avoir utilisé la bibliothèque xml2json-light pour convertir en un objet json, j'ai pu tirer parti de la réponse de cuixiping ci-dessus pour convertir le message entrant. image codée b64 en un objet fichier.

const imgName = incomingImage['FileName'];
const imgExt = imgName.split('.').pop();
let mimeType = 'image/png';
if (imgExt.toLowerCase() !== 'png') {
    mimeType = 'image/jpeg';
}
const imgB64 = incomingImage['_@ttribute'];
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});

Mon objet json entrant avait deux propriétés après conversion par xml2json-light: FileName et _ @ ttribute (qui étaient des données d'image b64 contenues dans le corps de l'élément entrant). Je devais générer le type mime basé sur l'extension FileName entrant. Une fois que tous les morceaux ont été extraits/référencés à partir de l’objet json, c’était une tâche simple (en utilisant la référence de code fournie par cuixiping) de générer le nouvel objet File, parfaitement compatible avec mes classes existantes, qui attendait un objet File généré à partir de l’élément de navigateur .

J'espère que cela aide à relier les points pour les autres.

0
JHBSA

La tête haute,

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"/>

Ensuite, mtlFileContent a votre texte sous forme de chaîne décodée!

0
jimver04