html - چگونه رشته Base64 را به یک شی فایل جاوااسکریپت تبدیل کنیم مانند آنچه از فرم ورودی فایل دریافت میکنیم؟

من میخواهم Base64String استخراجشده از فایل (مثال: "AAAAA....~") را به یک شیء فایل جاوااسکریپت تبدیل کنم.

منظورم از شیء فایل جاوااسکریپت مانند این کد است:

اچتیامال :

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

JS :

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

  console.log(file)
}

متغیر 'file' یک شیء فایل جاوااسکریپت است. بنابراین میخواهم یک رشته base64 را به شیء فایل جاوااسکریپت مانند آن تبدیل کنم.

من فقط میخواهم شیء فایل را با رمزگشایی رشته base64 (که توسط برنامه دیگری از یک فایل کدگذاری شده است) بدون فرم ورودی فایل HTML دریافت کنم.

متشکرم.

پاسخ شماره ۱

روش ۱: فقط برای dataURL کار میکند، نه برای انواع دیگر 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);

روش ۲: برای هر نوع آدرس اینترنتی کار میکند، (آدرس http، 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' });
}