Question

我正在研究ionic3应用程序。我需要通过相机或画廊从用户那里获取图像，首先将其保存到本地目录，然后将图像上传到服务器。我使用了以下分步教程：https://devdactic.com/ionic-2-images/ 上载照片的过程非常吸引人，但是在将图像保存到本地目录并将路径保存到本地存储的同时，从存储中检索后会显示以下错误：。
很明显，它抱怨 不允许加载本地资源 。接下来，我开始用Google搜索解决方案，然后在StackOverflow中找到了this解决方案，在GitHub中找到了this。正如他们俩所建议的那样，问题出在 cordova-plugin-ionic-webview ，所以我需要降级该版本。当我尝试他们的解决方案时，向用户上载和显示图像的工作正常，但是，这会带来问题，即应用程序的其他部分无论如何都从资产中加载数据。图像，字体。显示以下错误。接下来，我在GitHub here中找到了该问题的解决方案，正如大多数用户所建议并接受的那样，我们需要使用最新版本的** cordova-plugin-ionic- webview **，这当然会对我造成第一个问题。我还要在这里上传代码。

getImage() {
    this.presentActionSheet();
  } //end getImage
  public uploadImage() {
    console.log('Uploading the image');
    console.log(this.lastImageL);
    var targetPath = this.pathForImage(this.lastImage);

    console.log(targetPath);

    var url = "https://dev.raihan.pomdev.net/wp-json/raihan/v1/profilePhoto";


    var filename = this.lastImage;
    console.log(' targetPath  :   ', targetPath);
    console.log('File Name : ', filename)
    console.log(url, " IS the URL");
    var options = {
      fileKey: "image",
      fileName: filename,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params: {
        'image': filename,
        'user_id': 79
      }
    };

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

    this.loading = this.loadingCtrl.create({
      content: 'منتظر باشید',
    });
    this.loading.present();

    // Use the FileTransfer to upload the image
    fileTransfer.upload(targetPath, url, options).then(data => {
      this.loading.dismissAll()

      this.presentToast(' . عکس شما موفقانه ذخیره شد');

      this.storage.set("Profile_Photo", targetPath).then((data) => {
        console.log('response of uploading the image ', data);
        console.log('Target Path ', targetPath);
        console.log('In set storage ', targetPath);
        $("#Photo").attr("src", targetPath);
        $("#Photo2").attr("src", targetPath);
        console.log('myphoto ', targetPath);
      });
    }, err => {
      this.loading.dismissAll()
      this.presentToast('مشکلی در قسمت ذخیره کردن عکس شما وجود دارد  ' + err);
      console.log('error sending the image');
      console.log(err);
    });
  }
  public takePicture(sourceType) {

    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {

      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {
            let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
            let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
          });
      } else {
        var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
        var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      }
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad CaptureImagePage');
  }
  private createFileName() {
    var d = new Date(),
      n = d.getTime(),
      newFileName = n + ".jpg";
    return newFileName;
  }

  // Copy the image to a local folder
  private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
      this.lastImage = newFileName;
      this.uploadImage();
    }, error => {
      this.presentToast('Error while storing file. ' + error);
    });
  }

  private presentToast(text) {
    let toast = this.toastCtrl.create({
      message: text,
      duration: 5000,
      position: 'center'
    });
    toast.present();
  }

  // Always get the accurate path to your apps folder
  public pathForImage(img) {
    if (img === null) {
      return '';
    } else {
      return cordova.file.dataDirectory + img;
    }
  }
  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

` 现在我很困惑应该使用哪个版本的** cordova-plugin-ionic-webview **？有没有人可以帮助我？

注意：感谢您耐心阅读所有问题。

Answer 1

如果可能，我会尝试使用最新版本的WebView，然后在将window.Ionic.WebView.convertFileSrc()路径放在页面上进行显示之前，在file:///路径上使用getNormalizedUrl(path: string): SafeResourceUrl { let newPath = this.domSanitizer.bypassSecurityTrustUrl( window.Ionic.WebView.convertFileSrc(path)); return newPath; }方法。这些提示可以在这里查看：

https://ionicframework.com/docs/building/webview

Cordova和Capacitor应用程序托管在本地HTTP服务器上，并且   使用http：//协议。但是，某些插件会尝试   通过file：//协议访问设备文件。避免困难   在http：//和file：//之间，必须重写设备文件的路径   使用本地HTTP服务器。例如，file：/// path / to / device / file   必须重写为http：//：// path / to / device / file   在应用中呈现之前。

对于Cordova应用程序，Ionic Web View插件提供了一个实用程序   转换文件URI的功能：   window.Ionic.WebView.convertFileSrc（）。还有一个对应的   Ionic Native插件：@ ionic-native / ionic-webview。

这是我使用的示例方法，在4.x Webview中可以正常工作：

click.Command

使用cordova-plugin-ionic-webview版本有冲突吗？

1 个答案: