Bagaimana mengkonversi Blob ke File di JavaScript

111

Saya perlu mengunggah gambar ke server NodeJS ke beberapa direktori. Saya menggunakan connect-busboymodul node untuk itu.

Saya memiliki dataURLgambar yang saya ubah menjadi blob menggunakan kode berikut:

dataURLToBlob: function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);
        return new Blob([raw], {type: contentType});
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}

Saya memerlukan cara untuk mengonversi gumpalan menjadi file untuk mengunggah gambar.

Bisakah seseorang membantu saya dengan itu?

melewatkan
sumber
4
File adalah Blob, cukup tempelkan pada properti meta dan Anda siap melakukannya.
dandavis
1
Default untuk blob saat menguploadnya adalah blob. Jadi, saya ekstrak dulu nama file yang saya cropping lalu berikan yang sama filenamesehingga file yang di-crop sambil menguploadnya ke server dengan melakukan form.append("blob",blob, filename);.
lewati
@ Lewati apakah jawaban saya di bawah membantu? Ya, tolong tandai sebagai jawaban yang benar.
CBarr

Jawaban:

149

Fungsi ini mengubah a Blobmenjadi a Filedan berfungsi dengan baik untuk saya.

Vanilla JavaScript

function blobToFile(theBlob, fileName){
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
}

TypeScript (dengan pengetikan yang benar)

public blobToFile = (theBlob: Blob, fileName:string): File => {
    var b: any = theBlob;
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    b.lastModifiedDate = new Date();
    b.name = fileName;

    //Cast to a File() type
    return <File>theBlob;
}

Pemakaian

var myBlob = new Blob();

//do stuff here to give the blob some data...

var myFile = blobToFile(myBlob, "my-image.png");
CBarr
sumber
3
Saya pikir pemeran harus terjadi terlebih dahulu sehingga Anda tidak perlu menggunakan anyTypeScript. Lihat contoh ini .
styfle
2
Ini tidak bekerja untuk semua tujuan. Menambahkan "File" ini ke panggilan ajax tidak akan menyetel nama file dengan benar.
Jacob Poul Richardt
12
Ini bukan solusi yang baik, benda yang dihasilkan masih berupa gumpalan.
czupe
4
Cukup tambahkan b.__proto__ = File.prototype, dan solusi Anda menjadi mimpi yang bahkan trik b instanceOf Fileuntuktrue
manuelnaranjo
3
Hal ini seharusnya tidak menjadi jawaban yang diterima, stackoverflow.com/a/53205768/2557517 atau stackoverflow.com/a/31663645/2557517 seharusnya.
Kira
204

Anda dapat menggunakan konstruktor File:

var file = new File([myBlob], "name");

Sesuai spesifikasi w3, ini akan menambahkan byte yang berisi blob ke byte untuk objek File baru, dan membuat file dengan nama yang ditentukan http://www.w3.org/TR/FileAPI/#dfn-file

Joshua P Nixon
sumber
2
Inilah yang saya cari, satu-satunya perbedaan adalah argumen pertama sebenarnya adalah sebuah array jadi saya menggunakannya sebagai: var file = new File ([myBlob], "name");
Michaeldcooney
1
Iya. Saya mencari solusi ini juga. Server Stamplay tidak bisa mendapatkan nama file dari objek blob. Jadi saya perlu mengubahnya kembali menjadi file. Tapi Safari tidak mendukung API file ... kembali ke 0 sekarang :(
Hugh Hou
4
Konstruktor file tidak berfungsi misalnya di PhantomJS:TypeError: FileConstructor is not a constructor (evaluating 'new File([''], 'file.pdf', {'size': 1000, 'type': 'application/pdf'})')
bkimminich
7
Edge saat ini (2017-10-04) bug yang mencegah penggunaan konstruktor ini. developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
Rik Martins
8
Pastikan untuk menambahkan jenis file, jika tidak maka tidak akan berfungsi dengan baik. File baru ([myBlob], "name", {type: "image / jpeg",});
BernardA
34

Jawaban Joshua P Nixon benar tetapi saya juga harus menyetel tanggal modifikasi terakhir. jadi ini kodenya.

var file = new File([blob], "file_name", {lastModified: 1534584790000});

1534584790000 adalah stempel waktu unix untuk " GMT: Sabtu, 18 Agustus, 2018 9:33:10 "

mili
sumber
3
Poin untuk tidak melanggar instanceofseperti jawaban yang diterima
Matt Jensen
15

Bagi saya untuk bekerja, saya harus secara eksplisit memberikan jenisnya meskipun itu terkandung dalam blob dengan melakukannya:

const file = new File([blob], 'untitled', { type: blob.type })
Alexandre Daubricourt
sumber
14

Varian modern saya :

function blob2file(blobData) {
  const fd = new FormData();
  fd.set('a', blobData);
  return fd.get('a');
}
DAVID _
sumber
2
Untuk menambahkan nama file ke penggunaan file yang dihasilkan:fd.set('a', blobData, 'filename')
joaoguerravieira
Gagal di beberapa perangkat IOS saatfd.set
Nyanyikan
Terima kasih. ini berfungsi, Sekarang saya tidak perlu mengonversi gumpalan ke file.
xreyc_developer22
2

Gunakan saveAspada proyek github FileSaver.js .

FileSaver.jsmengimplementasikan saveAs()antarmuka FileSaver di browser yang tidak mendukungnya.

Muslim Shahsavan
sumber
2

Ketikan

public blobToFile = (theBlob: Blob, fileName:string): File => {       
    return new File([theBlob], fileName, { lastModified: new Date().getTime(), type: theBlob.type })
}

Javascript

function blobToFile(theBlob, fileName){       
    return new File([theBlob], fileName, { lastModified: new Date().getTime(), type: theBlob.type })
}

Keluaran

tangkapan layar

File {name: "fileName", lastModified: 1597081051454, lastModifiedDate: Mon Aug 10 2020 19:37:31 GMT+0200 (Eastern European Standard Time), webkitRelativePath: "", size: 601887, …}
lastModified: 1597081051454
lastModifiedDate: Mon Aug 10 2020 19:37:31 GMT+0200 (Eastern European Standard Time) {}
name: "fileName"
size: 601887
type: "image/png"
webkitRelativePath: ""
__proto__: File
Hossam EL-Kashef
sumber