मैं Ionic के इमेज-पिकर प्लगइन के विकल्प की तलाश कर रहा हूं या अपलोड के लिए फॉर्म में फाइल अटैच करने के लिए इसका उपयोग करने पर कुछ मार्गदर्शन कर रहा हूं। मैं जिस एपीआई का उपयोग कर रहा हूं उसके लिए फ़ाइल को फॉर्म के माध्यम से अपलोड करना आवश्यक है। विचार या सुझावों की बहुत सराहना की जाती है। एकाधिक फ़ाइल चयन की विशेषता इसका सबसे महत्वपूर्ण हिस्सा है।

1
Devdaddy 21 मई 2018, 17:59

2 जवाब

सबसे बढ़िया उत्तर

आप इसे प्राप्त करने के लिए मानक वेब एपीआई (फ़ाइल इनपुट) का उपयोग कर सकते हैं और विशेषता के रूप में "एकाधिक" का उपयोग कर सकते हैं।

आपका टेम्पलेट:

<button ion-button>
     <ion-icon name="image"></ion-icon>
     <input multiple type="file” (change)="loadImageFromDevice($event)" accept="image/png, image/jpeg">
</button>

आपका टीएस:

    myImages: Array<string>;

    ...

    loadImageFromDevice(event) {
        const files = event.target.files;
        const blobReader = new FileReader();
        files.forEach(file => {
            blobReader.readAsArrayBuffer(file);
            blobReader.onload = () => {
                let blob: Blob = new Blob([new Uint8Array((blobReader.result as ArrayBuffer))]);
                let blobURL: string = URL.createObjectURL(blob);
                this.myImages.push(blobURL);
            };
            blobReader.onerror = (error) => {
                console.log(error);
            };
        })
      };
1
Sergey Rudenko 8 जून 2019, 18:56

मुझे एक ही समस्या का सामना करना पड़ रहा है

Ionic HTML में फ़ाइल चुनने के लिए इस कोड का उपयोग करें


  <ion-input type="file" (change)="changeListener($event)"></ion-input>

टीएस फ़ाइल


changeListener(event) {
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = (_event) => {
  this.imgURL = reader.result;
  //base64 image
  console.log("Image File =>", this.imgURL);
}

}


फिर फ़ाइल नियंत्रक सरणी बनाएं और इसे बढ़ाने के लिए एक बटन बनाएं, फिर आप सर्वर को संभालने और अपलोड करने के लिए एकाधिक फ़ाइल नियंत्रण बना सकते हैं।

संदर्भ के लिए इसे जांचें http:/ /masteringionic.com/blog/2018-02-06-dynamically-add-and-remove-form-input-fields-with-ionic/

0
Jain Bhavesh 8 जून 2019, 17:30