उल्का: एक छवि अपलोड करना और डेटाबेस को बेस 64 स्ट्रिंग

Question

के रूप में सहेजना मेरे पास एक मीटरी ऐप है और मुझे सबसे आसान तरीके से काम करने के लिए छवि अपलोड करने में दिलचस्पी है।

किसी भी तरह से छवि के साथ क्लाइंट पर बेस 64 स्ट्रिंग में कनवर्ट करना और इसे स्ट्रिंग के रूप में डेटाबेस में सहेजना सबसे आसान तरीका है।

उपयोगकर्ता फाइल सिस्टम पर किसी बेस 64 स्ट्रिंग पर एक छवि को परिवर्तित करना और फिर डेटाबेस में सहेजना संभव है?

Answer 1

आप उपयोग कर सकते हैं एक HTML5 फ़ाइल इनपुट:

एचटीएमएल

<template name="fileUpload"> 
    <form> 
    <input type="file" name="imageFile"> 
    <button type="submit" disabled={{submitDisabled}}> 
     Submit 
    </button> 
    </form> 
</template> 

फिर परिवर्तन घटना को सुनने और एक FileReader का प्रयोग कर एक बेस 64 डेटा यूआरएल है कि हम करने जा रहे हैं के रूप में स्थानीय फ़ाइल को पढ़ने के लिए एक प्रतिक्रियाशील वर में स्टोर:

Template.fileUpload.created=function(){ 
    this.dataUrl=new ReactiveVar(); 
}; 

Template.fileUpload.events({ 
    "change input[type='file']":function(event,template){ 
    var files=event.target.files; 
    if(files.length===0){ 
     return; 
    } 
    var file=files[0]; 
    // 
    var fileReader=new FileReader(); 
    fileReader.onload=function(event){ 
     var dataUrl=event.target.result; 
     template.dataUrl.set(dataUrl); 
    }); 
    fileReader.readAsDataURL(file); 
    } 
}); 

फिर हम अनुमति देने के लिए प्रतिक्रियाशील वर मूल्य उपयोग कर सकते हैं/प्रपत्र प्रस्तुत करने की अनुमति नहीं देने और सर्वर के लिए मूल्य भेजें:

Template.fileUpload.helpers({ 
    submitDisabled:function(){ 
    return Template.instance().dataUrl.get(); 
    } 
}); 

Template.fileUpload.events({ 
    "submit":function(event,template){ 
    event.preventDefault(); 
    // 
    Meteor.call("uploadImage",template.dataUrl.get()); 
    } 
}); 

आप एक सर्वर विधि है कि कुछ संग्रह फ़ील्ड मान को dataUrl बचाता है परिभाषित करने के लिए की आवश्यकता होगी, क्या dataUrl रों के बारे में अच्छी बात यह है कि आप उन्हें सीधे चित्र टैग src के रूप में उपयोग कर सकते हैं।

ध्यान दें कि यह समाधान अत्यधिक असुरक्षित है क्योंकि छवि डेटा कैच करने योग्य नहीं होगा और ऐप डेटाबेस नियमित संचार को प्रदूषित करेगा (जिसमें केवल टेक्स्ट-जैसी मान होनी चाहिए)।

आप dataUrl से बेस 64 डेटा प्राप्त कर सकते हैं और इसे Google क्लाउड स्टोरेज या अमेज़ॅन एस 3 पर अपलोड कर सकते हैं और सीडीएन के पीछे फ़ाइलों की सेवा कर सकते हैं।

आप उन सेवाओं का भी उपयोग कर सकते हैं जो आपके लिए यह सब सामान अपलोड करते हैं जैसे अपलोडकेयर या फ़ाइलपिकर।

संपादित करें:

यह समाधान लागू करने के लिए आसान है, लेकिन मुख्य दोष यह है कि MongoDB से बड़े बेस 64 तार प्राप्त करते समय अन्य डेटा लाते समय से आपका ऐप धीमी हो जाएगी, डीडीपी संचार हमेशा रहते हैं और नहीं इस समय cachable के साथ आता है तो आपका ऐप हमेशा सर्वर से छवि डेटा को फिर से लोड करेगा।

आप dataUrl एस अमेज़ॅन को सहेज नहीं पाएंगे, तो आप सीधे छवि को सहेज लेंगे, और यह आपके ऐप द्वारा एक कैच करने योग्य HTTP अनुरोध के साथ एक अमेज़ॅन यूआरएल का उपयोग करके लाया जाएगा।

फ़ाइल अपलोड करने की स्थिति में आपके पास दो विकल्प हैं: आप उन्हें विशिष्ट जावास्क्रिप्ट ब्राउज़र API का उपयोग करके सीधे क्लाइंट से अपलोड कर सकते हैं या आप उन्हें सर्वर में Node.js (NPM मॉड्यूल) API में अपलोड कर सकते हैं।

यदि आप सर्वर से अपलोड करना चाहते हैं (जो आमतौर पर सरल है क्योंकि आपको अपने ऐप्स के उपयोगकर्ताओं को तृतीय पक्ष सेवाओं के विरुद्ध प्रमाणित करने की आवश्यकता नहीं है, केवल आपका सर्वर संचार करने के लिए एक विश्वसनीय ग्राहक के रूप में कार्य करेगा अमेज़ॅन एपीआई के साथ), तो आप उस डेटा को भेज सकते हैं जिसे उपयोगकर्ता dataUrl के साथ तर्क विधि के रूप में एक विधि कॉल के माध्यम से अपलोड करना चाहता है।

यदि आप इन सभी चीजों में डुबकी नहीं लेना चाहते हैं तो अपलोडकेयर या फ़ाइलपिकर का उपयोग करने पर विचार करें, लेकिन ध्यान रखें कि ये भुगतान सेवाएं हैं (जैसा कि अमेज़ॅन एस 3 बीटीडब्ल्यू है)।

Answer 2

सुनिश्चित नहीं है कि यह सबसे अच्छा तरीका है, लेकिन आप आसानी से फ़ाइल रीडर के साथ ऐसा कर सकते हैं। टेम्पलेट इवेंट हैंडलर में जहां आपको फ़ाइल सामग्री मिलती है, आप फ़ाइल को पाठक को पास कर सकते हैं और बेस 64 स्ट्रिंग वापस प्राप्त कर सकते हैं। उदाहरण के लिए, इस तरह कुछ:

Template.example.events({ 
    'submit form': function (event, template) { 
    var reader = new FileReader(); 
    var file = template.find('#fileUpload').files[0]; // get the file 

    reader.onload = function (event) { 
     // event.target.result is the base64 string 
    } 
    reader.readAsDataURL(file); 
    } 
});