FileReader () не определено в ионном 3 - PullRequest
Новая
       26

FileReader () не определено в ионном 3

0 голосов
/ 02 апреля 2019

Я пытаюсь загрузить фотографию на cloudinary, но мне это не удалось.Я пытался использовать плагин camera, чтобы прочитать файл из моей галереи, а затем использовать FileReader(), чтобы прочитать его как ArrayBuffer, а затем опубликовать его с http, как описано в моем коде ниже: 

import { Cloudinary } from "@cloudinary/angular-5.x";
import { Camera, CameraOptions } from "@ionic-native/camera";
import { File, FileEntry, FileReader } from "@ionic-native/file";

 userId: number = 123;
 baseUrl: string = 'https://api.cloudinary.com/v1_1/dvy1kjtzu/image/upload';

 fromGallery(): void {
    this.camera.getPicture({
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.FILE_URI,
        quality: 100,
        encodingType: this.camera.EncodingType.PNG,
    }).then(imageData => {
        this.myPhoto = imageData;
        this.upload(imageData);
    }, error => {
        console.log(JSON.stringify(error));
    });
}

upload(imageFileUri: any): void {
    this.showLoader('Uploading...');
    console.log('TYPES', typeof FileReader, '----')
    this.file.resolveLocalFilesystemUrl(imageFileUri)
            .then((entry: any) => entry.file(file => {
                this.readFile(file)}))
            .catch(err => console.log(JSON.stringify(err)));
}

readFile(file: any) {
    let reader = new FileReader();
    reader.onloadend = () => {
        const formData = new FormData();
        const imgBlob = new Blob([reader.result], {type: file.type});
        formData.append('file', imgBlob, file.name);
        this.postData(formData);
    };
    reader.readAsArrayBuffer(file);
}

postData(formData: FormData) {
    this.uploadImage(formData, this.userId).then((result: ApiResponse) => {
        this.dismissLoader();
        console.log('SUCCESS!')

    }, (err) => {
        this.dismissLoader();
        console.log(JSON.stringify(err));
    });
}

uploadImage(formData, userId) {
    return new Promise((resolve, reject) => {
        this.post('users/upload', {
            upload_preset:'my_preset',
                    id: userId
                }, formData
        ).subscribe(response => {
            resolve(response);
        }, err => {
            console.log( JSON.stringify(err));
            reject(err);
        });
    })
}

post(endpoint: string, params: any = null, body: any = null) {
    return this.http.post<ApiResponse>(this.baseUrl + '/' + endpoint, body, {
        params: params
    });
}

появившаяся ошибка указывает: Error in Success callbackId: File1089132322 : TypeError: undefined is not a function из FileReader()

Я пытался проследить на многих форумах с такой же проблемой:

  1. поставить cordova.js до polyfills.jsв index.html
  2. обновленные версии zone.js и cordova-plugin (возможно, это проблема некоторых версий)
  3. удален установленный плагин fileTransfer
  4. последовал за этим stackOverflow вопрос

но без удачи.

Вот мой Ionic info: 

  Ionic:

    ionic (Ionic CLI)  : 4.12.0 (C:\Users\Rahma\AppData\Roaming\npm\node_modules\ionic)
    Ionic Framework    : ionic-angular 3.9.3
    @ionic/app-scripts : 3.1.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 6.4.0
   Cordova Plugins       : no whitelisted plugins (23 plugins total)

System:

   NodeJS : v8.12.0 (C:\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

Любая помощь, пожалуйста?

...