【问题标题】:Unable to specify image upload path - ionic 3无法指定图像上传路径 - 离子 3
【发布时间】:2019-02-10 07:48:37
【问题描述】:

在通过图像选择器裁剪后,我正在尝试使用 ionic 应用程序将图像上传到 php 服务器。图片在其显示的路径中不存在。

有没有办法指定保存裁剪图像的路径?

这是我的代码:

getImage()
{
  var options = {
   maximumImagesCount: 1,
   width: 800,
   height: 800,
   quality: 80,
  };

 this.imagePicker.getPictures(options)
 .then((results) => {
   this.reduceImages(results).then(() => {
        this.photos = results;

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

            let d = new Date();
            let time = d.getTime();
            let options_f: FileUploadOptions = {
              fileKey: 'file',
              fileName: this.name + time + '.jpg',
              chunkedMode: false,
              mimeType: "image/jpg",
            };

            let url='https://elevather.com/mentor/file_upload.php';

            fileTransfer.upload(this.photos, url, options_f)
            .then((data) => {
              if(data["_body"]=="yes")
                this.msg = 'yes';
              else
                this.msg = 'no';
            }, (err) => {
              console.log('upload failed!');
            });

    }, (err) => { });
  }, (err) => { });
}

reduceImages(selected_pictures: any) : any{
  return selected_pictures.reduce((promise:any, item:any) => {
    return promise.then((result) => {
      return this.cropService.crop(item, {quality: 80})
       .then(cropped_image => console.log('Done'));
     });
  }, Promise.resolve());
}

我还有其他方法吗?

【问题讨论】:

    标签: typescript cordova ionic-framework ionic3 phonegap


    【解决方案1】:

    您是否尝试访问此路径?这是保存它的地方 (https://github.com/jeduan/cordova-plugin-crop/blob/master/src/android/CropPlugin.java)。

     private String getTempDirectoryPath() {
        File cache = null;
    
        // SD Card Mounted
        if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
            cache = new File(Environment.getExternalStorageDirectory().getAbsolutePath() +
                    "/Android/data/" + cordova.getActivity().getPackageName() + "/cache/");
        }
        // Use internal storage
        else {
            cache = cordova.getActivity().getCacheDir();
        }
    
        // Create the cache directory if it doesn't exist
        cache.mkdirs();
        return cache.getAbsolutePath();
    }
    

    【讨论】:

    • 感谢您的回复。你能告诉我可以为 ios 做什么吗?
    • 这是我在安卓设备中得到的路径:file:///data/user/0/io.ionic.starter/cache/tmp_Screenshot_20180905-2112141360997663.png
    • 您是否尝试像这样将返回值添加到您的函数中? this.reduceImages(results).then((imagePath) => { console.log(imagePath); this.photos = results;
    • 感谢您的指出。我现在添加了一个返回值。但是我得到的返回值是未定义的。
    • 我认为您还需要添加以下内容:.then(cropped_image => cropped_image);所以cropped_image也会被返回。
    【解决方案2】:

    您是否将 this.photos 替换为croppedImage?请参阅下面的代码。

    getImage()
    {
      var options = {
       maximumImagesCount: 1,
       width: 800,
       height: 800,
       quality: 80,
      };
    
     this.imagePicker.getPictures(options)
     .then((results) => {
       this.reduceImages(results).then((croppedImage) => {
            this.photos = croppedImage;
    
            const fileTransfer: FileTransferObject = this.transfer.create();
    
                let d = new Date();
                let time = d.getTime();
                let options_f: FileUploadOptions = {
                  fileKey: 'file',
                  fileName: this.name + time + '.jpg',
                  chunkedMode: false,
                  mimeType: "image/jpg",
                };
    
                let url='https://elevather.com/mentor/file_upload.php';
    
                fileTransfer.upload(this.photos, url, options_f)
                .then((data) => {
                  if(data["_body"]=="yes")
                    this.msg = 'yes';
                  else
                    this.msg = 'no';
                }, (err) => {
                  console.log('upload failed!');
                });
    
        }, (err) => { });
      }, (err) => { });
    }
    
    reduceImages(selected_pictures: any) : any{
      return selected_pictures.reduce((promise:any, item:any) => {
        return promise.then((result) => {
          return this.cropService.crop(item, {quality: 80})
           .then(cropped_image => cropped_image);
         });
      }, Promise.resolve());
    }
    

    【讨论】:

    • 是的,我做到了。也许我的 php 服务器代码中可能存在一些问题,或者图像必须以某种格式编码。你能建议它是什么吗?
    • 把一些日志放到你的php服务器上,看看你是否收到了图片细节和其他有用的信息。
    • 我已经放了一些代码,应该创建一个文件并向它添加一些数据。但是文件没有被创建。
    • 问题是应用程序是否将正确的数据发送到您的 php 服务器。如果是,那么你有一些错误,如果不是,仍然是应用程序问题。
    猜你喜欢
    • 2021-10-20
    • 2018-05-07
    • 2018-05-09
    • 2020-05-31
    • 2012-04-30
    • 1970-01-01
    • 1970-01-01
    • 2019-11-22
    • 1970-01-01
    相关资源
    最近更新 更多