ionic 4 (android) 从图库 (FILE_URI) 获取图像 (OBJECT FILE) 并通过 API 上传答案

【问题标题】：ionic 4 (android) get image (OBJECT FILE) from gallery (FILE_URI) and upload via APIionic 4 (android) 从图库 (FILE_URI) 获取图像 (OBJECT FILE) 并通过 API 上传
【发布时间】：2020-04-21 13:44:41
【问题描述】：

我正在尝试使用 Ionic v4 angular 和 cordova 实现一个简单的应用程序。只需选择一张照片并将其上传到 解析服务器 (back4app.com)。但我做不到。

这是我的代码：

home.page.ts

import { ParseService } from '../service/parse.service';

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

  selectPhoto() {
    const options: CameraOptions = {
      quality: 100,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true 
    }
    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      // let base64Image = 'data:image/jpeg;base64,' + imageData;
      // console.log(imageData);

      this.fileToUpload = imageData;

      this.phototoshow = this.webview.convertFileSrc(imageData);

    }, (err) => {
      // Handle error
    });
  }

 onSubmit() {

    this.presentLoading();

    // return this.apiService.upload(this.phototoshow).subscribe((data: any) => {
    return this.apiService.upload(this.fileToUpload).subscribe((data: any) => {
          console.log(data);
    }
}

service.ts

upload(img1): Observable<any> {
    // console.log(data);
    return this.http.post(this.apiURL + '/files/img.jpg', img1,{
      headers: {
        'X-Parse-Application-Id': this.APP_ID,
        'X-Parse-REST-API-Key': this.REST_API_KEY,
        'Content-Type':'image/jpeg'
      }
    })
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }

我能够以“输入类型 = 文件”的形式上传图像...... 但是使用科尔多瓦插件相机从图库中选择图像......它只返回 FILE_URI 但我需要 OBJECT通过 api rest 上传的文件。

我已经在网上阅读了足够多的信息但是这些旧信息对我没有帮助。我希望有人可以帮助我解决这个问题。谢谢

【问题讨论】：

标签： android angular cordova parse-platform ionic4

【解决方案1】：

我设法解决了这个问题：

  startUpload() {
      this.file.resolveLocalFilesystemUrl(this.fileToUpload)
      // this.file.resolveLocalFilesystemUrl(imgEntry.filePath)
          .then(entry => {
              (entry as FileEntry).file(file => this.readFile(file))
          })
          .catch(err => {
              alert('Error while reading file.');
          });
  }

  readFile(file: any) {
      const reader = new FileReader();
      reader.onload = () => {
          const imgBlob = new Blob([reader.result], {
              type: file.type
          });
          this.onSubmit(imgBlob);
      };
      reader.readAsArrayBuffer(file);
  }

【讨论】：

谢谢你，这是一个很大的帮助。