ionic-framework - 使用文件传输插件时出错 - Ionic 3

Question

我正在尝试使用

将图像上传到我的服务器

"cordova-plugin-file-transfer": "^1.7.1",

"@ionic-native/file-transfer": "^5.0.0",

component.ts

takePicture() {
  const options: CameraOptions = {
    quality: 50,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth: 500,
    targetHeight: 500,
    saveToPhotoAlbum: false
  };

  this.camera.getPicture(options)
  .then((imageData) => this._img.uploadImage(imageData))
  .catch(err => console.log(err));
}

imageProvider.ts

import { FileTransfer, FileUploadOptions, FileTransferObject } from "@ionic-native/file-transfer/ngx";

   ...

uploadImage(img) {

  const url = `${this.apiURL}/images/upload`;

  // File for Upload
  var targetPath = img;

  var options: FileUploadOptions = {
    fileKey: 'image',
    chunkedMode: false,
    mimeType: 'multipart/form-data'
  };

  const fileTransfer: FileTransferObject = this.transfer.create();

  fileTransfer.upload(targetPath, url, options)
    .then(() => {
      console.log('good');
    }, (err) => {
      console.log('bad');
    })
}

我在 logcat Android Studio 中收到此错误:

"TypeError: Cannot read property 'constructor' of undefined"

我发现代码在到达这一行之前运行良好

const fileTransfer: FileTransferObject = this.transfer.create();

Answer 1

您使用了错误的原生插件版本，对于 Ionic 3，您应该使用版本 4。

ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer@4

另外，不要在导入的末尾附加 ngx。

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

为了您将来的引用，如果您使用的是 Ionic 3，请遵循 Ionic v3 文档而不是最新文档。

V3 文档:https://ionicframework.com/docs/v3/native/file-transfer/