Ionic 3 上传多张带有额外数据的图像

Question

我有一个 ionic 3 应用；我正在研究上传个人资料图片功能。在此，我想 select 来自画廊的图像或使用相机捕获图像。之后，我将有两个images/image_paths。我想连同 user_id、access_token

一起上传这两张图片

Select 图片来自画廊让选项= { 标题：'Select Picture'，消息：'Select Least 1 Picture'，最大图片数：1，输出类型：0 };

this.imagePicker.getPictures(option).then(results => {
          for (var i = 0; i < results.length; i++) {
            // alert('Image URI: ' + results[i]);
            this.imageSelected = "data:image/jpeg;base64," +results[i];
            // this.imageSelected = results[i];
            let option = {
              quality: 100,
              targetHeight: 400,
              targetWidth: 400,
            };
            this.crop.crop(this.imageSelected, option).then((data) => {
              this.imageCropped = "data:image/jpeg;base64," +data;
              // alert(this.imageCropped);
              this.saveProfileImage(this.imageSelected, this.imageCropped);
            }, err => {
              this.imageCropped = '';
              alert(err);
            });
          }
        }, err => {
          this.imageSelected = '';
          alert('Error' + err);
        })

Select 来自相机的图像让选项：CameraOptions = { 质量：100，目的地类型：this.camera.DestinationType.DATA_URL，编码类型：this.camera.EncodingType.JPEG，媒体类型：this.camera.MediaType.PICTURE }

this.camera.getPicture(options).then((imageData) => {
          // alert(imageData);
          this.imageSelected = "data:image/jpeg;base64," +imageData;
          let option = {
            quality: 100,
            targetHeight: 400,
            targetWidth: 400,
          };
          this.crop.crop(this.imageSelected, option).then((data) => {
            this.imageCropped = "data:image/jpeg;base64," +data;
            this.saveProfileImage(this.imageSelected, this.imageCropped);
          }, err => {
            this.imageCropped = '';
            alert(err);
          });
        }, (err) => {
          this.imageSelected = '';
          alert('Error' + err);
        });

请看上面的代码，如果正确，建议我如何用表单数据或任何其他方法编写上传功能

[这是我尝试上传图片的第一种方式的屏幕截图

Answer 1

首先你需要创建一个formData object.

private formData:any = {
    'user_id':this.userId,
    'access_token':this.accessToken,
    'device_id':this.devId,
    'device_type':this.devType,
    'registration_ip':this.ipAdd,
    'image':'',
    'crop_image'
  };

需要更改imagePicker

this.imagePicker.getPictures(option).then(results => {

  for (var i = 0; i < results.length; i++) {
    // alert('Image URI: ' + results[i]);

    //set it results[i] in unCropImages

    this.data.image= "data:image/jpeg;base64," +results[i];

    this.imageSelected = results[i];
    let option = {
      quality: 100,
      targetHeight: 400,
      targetWidth: 400,
    };

    this.crop.crop(this.imageSelected, option).then((data) => {
      this.imageCropped = "data:image/jpeg;base64," +data;
      // alert(this.imageCropped);

      //set it imageCropped in cropImage

      this.data.crop_image= this.imageCropped;

      //No need to this function

      this.saveProfileImage();

    }, err => {
      this.imageCropped = '';
      alert(err);
    });
  }
}, err => {
  this.imageSelected = '';
  alert('Error' + err);
})

需要在camera

中更改

this.camera.getPicture(options).then((imageData) => {
          // alert(imageData);
          this.imageSelected = "data:image/jpeg;base64," +imageData;

          this.data.image= "data:image/jpeg;base64," +results[i];

          let option = {
            quality: 100,
            targetHeight: 400,
            targetWidth: 400,
          };
          this.crop.crop(this.imageSelected, option).then((data) => {
            this.imageCropped = "data:image/jpeg;base64," +data;

            this.data.crop_image= this.imageCropped;

          this.saveProfileImage();
          }, err => {
            this.imageCropped = '';
            alert(err);
          });
        }, (err) => {
          this.imageSelected = '';
          alert('Error' + err);
        });

设置POST方法

首先你需要在 app.module.ts 文件的导入部分注入 HttpClientModule

然后在saveProfileImage()函数class

的constructor里面注入private http: HttpClient

saveProfileImage()

的变化

saveProfileImage(){

  return new Promise((resolve, reject) => {
    this.http.post('Your URL', JSON.stringify(this.formData))
      .subscribe(res => {
        resolve(res);
       //success 
      }, (err) => {
        reject(err);
        //fail
      });
  });

}

Answer 2

甚至我前段时间也遇到了同样的问题，并且没有在网上找到合适的解决方案。下面是我经过一番研究后发现的解决方案，它工作得非常好，不仅适用于图像，也适用于其他文件。由于问题是关于图像的，所以我将解释图像的答案w.r.t。（除了选择文件外，其他文件步骤相同）。

您可以使用 Cordova camera plugin, After installing the plugin and importing it on app.module.ts and adding it to provider, you can use below code to choose images from camera or from gallery. ActionSheetController 选择图像，这是为用户提供选项的最佳方式，是从图库还是从相机中选择图像。

从相机中选择图像的代码：

const options: CameraOptions = {
  quality: 100,
  correctOrientation: true,
  cameraDirection: 1,
}

this.camera.getPicture(options).then((imageData) => {
  console.log("IMAGE DATA IS", imageData);
}).catch(e => {
  console.log("Error while picking from camera", e)
})

从图库中选择图片的代码：

var options = {
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  destinationType: this.camera.DestinationType.FILE_URI,
};
this.camera.getPicture(options).then((imageData) => {
  console.log("IMAGE DATA IS", imageData);
}).catch(e => {
  console.log("Error while picking from gallery", e)
});

选择图片后，您需要使用com-badrit-base64插件将其转换为base64。安装插件并在 app.module.ts 上导入并添加到提供程序列表后，只需将相机插件的输出传递给它，所选图像将被转换为 base64。

下面是将所选图像转换为 base64 的代码片段，我已经为相机编写了它，它仍然适用于画廊。将图像转换为 base64 后将其推送到数组。现在您可以选择多个图像并将其值存储在数组中。

var options = {
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  destinationType: this.camera.DestinationType.FILE_URI,
};
this.camera.getPicture(options).then((imageData) => {
  console.log("IMAGE DATA IS", imageData);

  let filePath: string = imageData
  this.base64.encodeFile(filePath).then((base64File: string) => {
    console.log(base64File);
    this.base64File.push(base64File);
  }, (err) => {
    console.log(err);
  });

}).catch(e => {
  console.log("Error while picking from gallery", e)
});

现在通过您的 API 将数据发送到服务器。您可以使用 cordova-plugin-advanced-http 或 Angular-http 来实现它。 API 应该以数组的格式拍摄图像，以及其他参数。由于 base64 图像将是一个长度更大的字符串，对于 REST 的 post 方法，建议使用 formData 或 row 而不是 url 编码格式。
现在在后端将解析正文并提取图像数组。在所有用于编写 API 的流行后端语言（Java、PHP、NodeJS、C# 等）中，都有免费的库将 base64 图像转换为实际的图片。
哇哦，就是这样，现在您可以通过 API 将多张图片发送到您的服务器了。除了图像，如果您尝试选择任何其他 MIME 类型（pdf、doc、docx 等）的文件，您可以使用相同的方法。

我还在以下位置创建了一个 git 中心存储库：https://github.com/coolvasanth/upload-multiple-image-files-in-Ionic-3-4/blob/master/README.md

Ionic 3 上传多张带有额外数据的图像

Ionic 3 upload multiple images with extra data

angular

ionic-framework

ionic3

ionic-native