Base64 String을 파일 입력 양식과 같은 자바스크립트 파일 개체로 변환하는 방법은 무엇입니까?

Base64 String을 파일 입력 양식과 같은 자바스크립트 파일 개체로 변환하는 방법은 무엇입니까?

파일에서 추출한 Base64String을 변환합니다(예: "AAAAA..~)를 자바스크립트 파일 개체로 바꿉니다.

javascript 파일 개체는 다음 코드와 같습니다.

HTML:

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

JS:

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

  console.log(file)
}

'file' 변수는 javascript 파일 개체입니다.그래서 저는 베이스64 문자열을 자바스크립트 파일 객체로 그렇게 변환하고 싶습니다.

html 파일 입력 양식 없이 base64 문자열(파일에서 다른 앱으로 인코딩됨)을 디코딩하여 파일 개체를 얻고 싶습니다.

감사해요.

방법 1: 데이터에만 적합합니다.URL. 다른 유형의 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);

Way 2: 모든 유형의 url, (http url, dataURL, blobURL 등)에서 작동합니다.

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

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 문자열 -> Blob -> 파일입니다.

이게 제일 최근의 것입니다.async/await패턴 용액

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

여기 atob() 대신 Buffer(버퍼)를 사용하는 @cuixiping에 의한 위의 Typescript 버전의 수락된 답변이 있습니다.

TypeScript에서 tob()을 사용하여 감가상각 경고를 보았지만, 완전히 감가상각되지는 않았습니다.단 한가지 과부하가 있습니다.하지만 Buffer의 감가상각 경고 제안을 사용하도록 전환했습니다.각각의 캐릭터를 변환하는데 별도의 루프가 필요 없기 때문에 더 깔끔해 보입니다.

  /***
   * Converts a dataUrl base64 image string into a File byte array
   * dataUrl example:
   * data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAACLCAYAAABRGWr/AAAAAXNSR0IA...etc
   */
  dataUrlToFile(dataUrl: string, filename: string): File | undefined {
    const arr = dataUrl.split(',');
    if (arr.length < 2) { return undefined; }
    const mimeArr = arr[0].match(/:(.*?);/);
    if (!mimeArr || mimeArr.length < 2) { return undefined; }
    const mime = mimeArr[1];
    const buff = Buffer.from(arr[1], 'base64');
    return new File([buff], filename, {type:mime});
  }

파일의 맨 위에 입력 내용을 저장하려면 가져오기가 필요합니다.

import { Buffer } from 'buffer';

특별한 npm 패키지는 필요 없습니다.

const file = new File([
  new Blob(["decoded_base64_String"])
], "output_file_name");

이와 같은 lib를 사용하여 base64를 arrayBuffer로 디코딩하고 인코딩할 수 있습니다.

저는 (외부 xml 가져오기 파일에서 base64 인코딩 이미지 가져오기)와 매우 유사한 요구 사항을 가지고 있었습니다.xml2json-light library를 사용하여 json 객체로 변환한 후 위의 cuixiping의 답변에서 통찰력을 활용하여 들어오는 b64 인코딩 이미지를 파일 객체로 변환할 수 있었습니다.

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

xml2json-light로 변환한 후 내 수신 json 개체에는 두 가지 속성이 있습니다.FileName 및 _@ttribute(수신 요소의 본문에 포함된 b64 이미지 데이터였습니다.들어오는 FileName 확장자를 기반으로 mime-type을 생성해야 했습니다.json 객체에서 모든 조각을 추출/참조하고 나면 브라우저 요소에서 생성된 파일 객체를 예상하는 기존 클래스와 완전히 호환되는 새로운 파일 객체를 생성하는 것이 간단한 작업이었습니다.

이것이 다른 사람들을 위해 점들을 연결하는 데 도움이 되기를 바랍니다.

조심하다.

자바스크립트

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

그러면 mtlFileContent는 텍스트를 디코딩된 문자열로 가집니다!

타이프스크립트 전체 버전

async uploadImage(b64img: string) {
  var file = await this.urltoFile(b64img,'name.png',this.base64MimeType(b64img));
}

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

//return mime Type of bs64
base64MimeType(encoded) {
    var result = null;
  
    if (typeof encoded !== 'string') {
      return result;
    }
  
    var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
  
    if (mime && mime.length) {
      result = mime[1];
    }
  
    return result;
}

Base64 이미지를 파일로 변환하는 것이 좋습니다.

이것은 나의 신용에 효과가 있었습니다.

base64ToFile = (url: string) => {
let arr = url.split(',');
// console.log(arr)
let mime = arr[0].match(/:(.*?);/)![1];
let data = arr[1];

let dataStr = atob(data);
let n = dataStr.length;
let dataArr = new Uint8Array(n);

while (n--) {
  dataArr[n] = dataStr.charCodeAt(n);
}

let file = new File([dataArr], 'File.png', { type: mime });

return file;
};

언급URL : https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f