Kéo và thả hình ảnh tải lên, góc 4

Question

Tôi đã tạo một kéo và thả dịch vụ tải lên giả mạo. Tôi có thể đăng nhập chiều rộng và chiều cao của hình ảnh cũng như url. Tuy nhiên hình ảnh không được tải lên. Vấn đề là 'img' trong chức năng tải lên của tôi là không xác định nếu tôi muốn đăng nhập. Làm thế nào tôi có thể sửa lỗi này? Tại sao nó không xác định?

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; 
    } 

} 

Answer 1

Tôi đã tìm ra, vấn đề là tôi không thực sự quay lại img.

Đây là câu lệnh return mới của tôi trong hàm getImage:

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