拖放图片上传，角度4

Posted 2023-05-08

【中文标题】拖放图片上传，角度4

【英文标题】：Drag and drop image upload, angular 4

【发布时间】：2017-12-23 08:22:53

【问题描述】：

我创建了一个拖放假上传服务。我可以记录图片的宽度和高度以及网址。但是图片没有上传。 问题是如果我想记录它，我的上传函数中的“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;
    

【参考方案1】：

我想通了，问题是我并没有真正返回 img。

这是我在 getImage 函数中的新返回语句：

return Promise.all([readFile, readImg]).then(img => this.getBase64Image(img))