जावास्क्रिप्ट को फ़ाइल में जावास्क्रिप्ट में कैसे परिवर्तित करें

Question

मुझे कुछ निर्देशिका में NodeJS सर्वर पर एक छवि अपलोड करने की आवश्यकता है। मैं connect-busboyउस के लिए नोड मॉड्यूल का उपयोग कर रहा हूं ।

मेरे पास उस dataURLछवि का था जिसे मैंने निम्न कोड का उपयोग करके बूँद में परिवर्तित किया था:

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

मुझे छवि अपलोड करने के लिए बूँद को फ़ाइल में बदलने का एक तरीका चाहिए।

क्या कोई मेरी मदद कर सकता है?

Comments

फ़ाइलें Blobs हैं, बस मेटा गुणों से निपटने और आप जाने के लिए अच्छे हैं।

— 21

अपलोड करते समय बूँद के लिए डिफ़ॉल्ट blob। इसलिए, मैंने सबसे पहले उस फ़ाइल का नाम निकाला, जिसे मैं क्रॉप कर रहा था और फिर उसी filenameक्रॉप्ड फ़ाइल को सर्वर पर अपलोड करते हुए दिया form.append("blob",blob, filename);।

— छोड़ दें

@ मेरे सुझाव के नीचे मेरा जवाब मदद से बाहर था? ऐसा है, कृपया इसे सही उत्तर के रूप में चिह्नित करें।

— CBarr

Answer 1

यह फ़ंक्शन ए Blobमें परिवर्तित Fileकरता है और यह मेरे लिए बहुत अच्छा काम करता है।

वेनिला जावास्क्रिप्ट

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

टाइपस्क्रिप्ट (उचित टाइपिंग के साथ)

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

प्रयोग

var myBlob = new Blob();

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

var myFile = blobToFile(myBlob, "my-image.png");

Comments

मुझे लगता है कि कलाकारों को पहले होना चाहिए ताकि आपको anyटाइपस्क्रिप्ट में उपयोग करने की आवश्यकता न हो । इस उदाहरण को देखें ।

— स्टाइलफेल

यह सभी उद्देश्यों के लिए काम नहीं करता है। इस "फ़ाइल" को एक अजाक्स कॉल में जोड़ने से फ़ाइल नाम सही तरीके से सेट नहीं होगा।

— जैकब पॉल रिचर्ड

यह एक अच्छा समाधान नहीं है, उत्पादित वस्तु अभी भी एक बूँद है।

— czupe

बस जोड़ने के b.__proto__ = File.prototypeलिए, और अपने समाधान एक सपना हो जाता है कि यहां तक कि चाल b instanceOf Fileके लिएtrue

— manuelnaranjo

यह स्वीकृत उत्तर नहीं होना चाहिए, stackoverflow.com/a/53205768/2557517 या stackoverflow.com/a/31663645/2557517 होना चाहिए।

— Kira

Answer 2

आप फ़ाइल निर्माता का उपयोग कर सकते हैं:

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

W3 विनिर्देश के अनुसार यह बाइट को जोड़ देगा कि बूँद में नई फ़ाइल ऑब्जेक्ट के लिए बाइट्स शामिल हैं, और निर्दिष्ट नाम http://www.w3.org/TR/FileAPI/#dfn-file के साथ फ़ाइल बनाएं

Comments

यह वही है जो मैं खोज रहा था, एक अंतर यह है कि पहला तर्क वास्तव में एक सरणी है इसलिए मैंने इसे इस रूप में उपयोग किया: var फ़ाइल = नई फ़ाइल ([myBlob], "नाम");

— माइकलडकोनी

हाँ। मैं इस समाधान की भी तलाश कर रहा हूं। Stamplay सर्वर को बूँद ऑब्जेक्ट से फ़ाइल का नाम नहीं मिल सकता है। इसलिए मुझे इसे वापस फ़ाइल में बदलने की आवश्यकता है। लेकिन सफारी फ़ाइल एपीआई का समर्थन नहीं करती ... वापस 0 पर अब :(

— ह्यूग होउ

फ़ाइल निर्माता जैसे PhantomJS में काम नहीं करते:TypeError: FileConstructor is not a constructor (evaluating 'new File([''], 'file.pdf', {'size': 1000, 'type': 'application/pdf'})')

— bkimminich

एज में वर्तमान में (2017-10-04) एक बग है जो इस कंस्ट्रक्टर के उपयोग को रोकता है। developer.microsoft.com/en-us/microsoft-edge/platform/issues/…

— Rik Martins

फ़ाइल प्रकार जोड़ना सुनिश्चित करें, अन्यथा यह ठीक से काम नहीं करेगा। नई फ़ाइल ([myBlob], "नाम", {प्रकार: "छवि / जेपीईजी",});

— बर्नार्डा

Answer 3

यहोशू पी निक्सन का जवाब सही है, लेकिन मुझे अंतिम संशोधित तिथि भी निर्धारित करनी थी। तो यहाँ कोड है।

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

1534584790000 "के लिए एक यूनिक्स टाइमस्टैम्प है जीएमटी: शनिवार, 18 अगस्त, 2018 09:33:10 "

Comments

instanceofस्वीकार किए गए उत्तर की तरह नहीं तोड़ने के लिए अंक

— मैट जेन्सेन

Answer 4

मेरे लिए काम करने के लिए मुझे स्पष्ट रूप से प्रकार प्रदान करना था, हालांकि ऐसा करने से यह बूँद में निहित है:

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

Answer 5

मेरा आधुनिक संस्करण:

function blob2file(blobData) {
  const fd = new FormData();
  fd.set('a', blobData);
  return fd.get('a');
}

Comments

परिणामी फ़ाइल उपयोग में फ़ाइल नाम जोड़ने के लिए:fd.set('a', blobData, 'filename')

— joaoguerravieira

यह कुछ IOS डिवाइस में विफल रहता है जबfd.set

— गाएं

धन्यवाद। यह काम करता है, अब मुझे बूँद को फाइल में बदलना नहीं है।

— xreyc_developer22

Answer 6

FileSaver.js github प्रोजेक्ट saveAsपर उपयोग करें ।

FileSaver.jsउन saveAs()ब्राउज़र में फ़ाइलस्वर इंटरफ़ेस को लागू करता है जो मूल रूप से इसका समर्थन नहीं करते हैं।

Answer 7

टाइपप्रति

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

जावास्क्रिप्ट

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

उत्पादन

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