我创建了一个拖放假上传服务。我可以记录图片的宽度和高度以及网址。但是图像没有上传。 问题是如果我想记录它,我的上传函数中的“img”是未定义的。我怎样才能解决这个问题?为什么它是未定义的?
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;
}
}
最佳答案
我想通了,问题是我没有真正返回img。
这是我在 getImage 函数中的新返回语句:
return Promise.all([readFile, readImg]).then(img => this.getBase64Image(img))
关于angular - 拖放图片上传,angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45167248/