当 ionic 中的图像上传为空时，无法读取未定义的属性“拆分”答案

【问题标题】：Cannot read property 'split' of undefined when image upload is empty in ionic当 ionic 中的图像上传为空时，无法读取未定义的属性“拆分”
【发布时间】：2019-01-20 18:24:44
【问题描述】：

我尝试在浏览器中测试我的离子图像上传应用程序，但由于屏幕上显示了cordova_not_available，我无法上传图像，每次我点击上传按钮时都会弹出此错误无法读取属性'split ' 未定义

NewpostPage.html:51 错误 ReferenceError: FileTransfer 未在 Object.eval 的 NewpostPage.webpackJsonp.162.NewpostPage.uploadPhoto (VM1295 main.js:601) 的新传输 (VM1294 vendor.js:149642) 中定义 [as handleEvent] (VM1527 NewpostPage.ngfactory.js:180) at handleEvent (VM1294 vendor.js:13963) at callWithDebugContext (VM1294 vendor.js:15472) at Object.debugHandleEvent [as handleEvent] (VM1294 vendor.js:15059) at dispatchEvent (VM1294 vendor.js:10378) 在 VM1294 vendor.js:11003 在 HTMLButtonElement。 (VM1294 vendor.js:39326) at t.invokeTask (VM1427 polyfills.js:3)

在我的 upload.ts 我有这个

 uploadPhoto() {
    let loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    loader.present();

    //let filename = this.imagePath.split('/').pop();
    console.log('this.imagePath: ', this.imagePath)
    let filename = this.imagePath;
    let options = {
      fileKey: "file",
      fileName: filename,
      chunkedMode: false,
      mimeType: "image/jpg",
      params: {'location': this.location, 'title': this.postTitle, 'description': this.desc }
    };


    const fileTransfer = new Transfer();

    fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT,
      options).then((entry) => {
        this.imagePath = '';
        this.imageChosen = 0;
        loader.dismiss();
        this.navCtrl.setRoot(IncidentsPage);
      }, (err) => {
        alert(JSON.stringify(err));
      });
  }

  chooseImage() {

    let actionSheet = this.actionSheet.create({
      title: 'Choose Picture Source',
      buttons: [
        {
          text: 'Gallery',
          icon: 'albums',
          handler: () => {
            this.actionHandler(1);
          }
        },
        {
          text: 'Camera',
          icon: 'camera',
          handler: () => {
            this.actionHandler(2);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });

    actionSheet.present();
  }


  //}

  actionHandler(selection: any) {
    var options: any;

    if (selection == 1) {
      options = {
        quality: 75,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        saveToPhotoAlbum: false
      };
    } else {
      options = {
        quality: 75,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        saveToPhotoAlbum: false
      };
    }

    Camera.getPicture(options).then((imgUrl) => {

      var sourceDirectory = imgUrl.substring(0, imgUrl.lastIndexOf('/') + 1);
      var sourceFileName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
      sourceFileName = sourceFileName.split('?').shift();
      File.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
        this.imagePath = imgUrl;
        this.imageChosen = 1;
        this.imageNewPath = result.nativeURL;

      }, (err) => {
        alert(JSON.stringify(err));
      })

    }, (err) => {
      alert(JSON.stringify(err))
    });

  }

请帮忙。

【问题讨论】：

无论出于何种原因，this.imagePath 似乎是未定义的。在您尝试 split() 之前，请执行 console.log('this.imagePath: ', this.imagePath) 并检查该变量是否符合您的预期。如果不回去，找出原因。
@Shannon，是的，它是未定义的。你能帮帮我吗？我是离子新手。谢谢。
如果不熟悉您的代码，我不知道如何解决问题。您需要从生命周期的开始查看 this.imagePath 并了解它未定义的原因。这意味着它没有价值，你显然在某个时候为它设置了一个值，它哪里出错了？
@Shannon，请检查。我已经更新了我的代码。谢谢。
我可以看到你在 getPicture().then() 中设置了 this.imagePath 是否在那里未定义？

标签： ionic-framework ionic2

【解决方案1】：

我想我明白你现在在问什么了。

在运行uploadPhoto() 中的代码之前，您需要检查未定义和“”。

uploadPhoto() {

if(this.imagePath !== undefined || this.imagePath !== '') {
let loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    loader.present();

    //let filename = this.imagePath.split('/').pop();
    console.log('this.imagePath: ', this.imagePath)
    let filename = this.imagePath;
    let options = {
      fileKey: "file",
      fileName: filename,
      chunkedMode: false,
      mimeType: "image/jpg",
      params: {'location': this.location, 'title': this.postTitle, 'description': this.desc }
    };


    const fileTransfer = new Transfer();

    fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT,
      options).then((entry) => {
        this.imagePath = '';
        this.imageChosen = 0;
        loader.dismiss();
        this.navCtrl.setRoot(IncidentsPage);
      }, (err) => {
        alert(JSON.stringify(err));
      });
  }
} else {
    //do something else

}

【讨论】：