यह profile.component.html . में है

<label for="profile">Profile Photo</label>
<input type="file" [(ngModel)]='input'/>
<img [src]='input'>

यह profile.component.ts . में है

profilePhoto: File;

set input(temp: File) {
    this.profilePhoto = temp;
 }

get input() {
    return this.profilePhoto;
}
0
swarbrick85 31 मार्च 2020, 05:12

1 उत्तर

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

सबसे पहले [(ngModel)] फ़ाइल इनपुट पर वास्तव में एक स्ट्रिंग प्रदान कर रहा है, यहां फ़ाइल ऑब्जेक्ट नहीं; set input(temp: File) { .. }.

चूंकि कुछ ब्राउज़र फ़ाइल पथ की सुरक्षा करते हैं, इसलिए यह स्ट्रिंग पथ अक्सर आभासी होता है (अर्थात C:\fakepath\image.png)। कुछ कामकाज हैं लेकिन ये ब्राउज़र में असंगत हैं। इसके बारे में यहाँ और देखें; C:\fakepath को कैसे हल करें?

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

आपके मामले में, आप अपने छवि तत्व के लिए छवि डेटा लोड करने के लिए बस FileReader का उपयोग कर सकते हैं। यदि आप बाद में फ़ाइल डेटा भी अपलोड करना चाहते हैं तो यह उसी तरह की प्रक्रिया है जिसका आप उपयोग कर सकते हैं।

const fReader = new FileReader();
fReader.readAsDataURL(this.profilePhoto);
fReader.onloadend = (event) => {
  this.profilePhotoImage = event.target.result;
}

यहां काम करने का उदाहरण; https://stackblitz.com/edit/angular-cfvlhn

3
Ralpharoo 31 मार्च 2020, 05:01