6
मैंने नकली अपलोड सेवा खींच ली और छोड़ दी। मैं चित्र की चौड़ाई और ऊंचाई के साथ-साथ यूआरएल लॉग कर सकता हूं। हालांकि छवि अपलोड नहीं हो रही है। समस्या यह है कि अगर मैं इसे लॉग करना चाहता हूं तो मेरे अपलोड फ़ंक्शन में 'img' अपरिभाषित है। मैं इसे कैसे ठीक करूं? यह अनिर्धारित क्यों है?छवि अपलोड खींचें और छोड़ें, कोणीय 4
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class DragNDropService {
constructor() {
}
upload(formData: any) {
const photos: any[] = formData.getAll('photos');
const promises = photos.map((x: File) => this.getImage(x)
.then(img => {
return({
id: img,
originalName: x.name,
fileName: x.name,
url: img
})}));
return Observable.fromPromise(Promise.all(promises));
}
private getImage(file: File) {
const fReader = new FileReader();
const img = document.createElement('img');
const readFile = new Promise((resolve, reject) => {
fReader.onload =() => {
resolve(img.src = fReader.result);
}
fReader.readAsDataURL(file);
})
const readImg = new Promise((resolve, reject) => {
img.onload =() => {
resolve(img)
}
})
return Promise.all([readFile, readImg]).then(img => {
this.getBase64Image(img)
})
}
private getBase64Image(img) {
const canvas = document.createElement('canvas');
console.log(img[1].width)
console.log(img[1].height)
canvas.width = img[1].width;
canvas.height = img[1].height;
const ctx = canvas.getContext('2d');
console.log(img)
ctx.drawImage(img[1], 0, 0);
const dataURL = canvas.toDataURL('image/png');
return dataURL;
}
}