如何在Ionic 3中使用某些表格数据从相机插件上传捕获的图像?

时间:2018-11-20 06:15:13

标签: ionic3 angular5 angular6

我知道这个问题被问过很多次,但是没有解决方案对我有用。因此,我再次发布了此信息。我想将带有产品名称和产品描述等表单数据的相机插件捕获的图像上传到Java Web服务。

html file code:
<ion-content padding>
  <button ion-button (click)="capture_image()">Capture Image</button>
  <button ion-button (click)="upload_image()">Upload Image</button>
  <img [src]="sanatizeBase64Image(myphoto)" onError="this.onError=null;">
</ion-content>  

ts file code:
capture_image(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    //let base64Image = 'data:image/jpeg;base64,' + imageData;
    this.temp = imageData;
    this.myphoto = 'data:image/jpeg;base64,' + imageData;
    // this.image = new Image()
    // this.image.src = imageData;
    // this.myphoto = URL.createObjectURL(this.image);

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

  sanatizeBase64Image(image) {
    if(image) {
      return this.DomSanitizer.bypassSecurityTrustResourceUrl(image);
    }
  }

  upload_image(){
    let loader = this.loadingCtrl.create({
      content: "Uploading..."
    });
    //loader.present();

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

    var random = Math.floor(Math.random() * 100);

    let options1: FileUploadOptions = {
      fileKey: 'photo',
      fileName: "myImage_" + random + ".jpg",
      chunkedMode: false,
      httpMethod: 'post',
      mimeType: "image/jpeg",
      headers: {} 
    }

    console.log('options1====>',options1);
    let file = this.temp;
    fileTransfer.upload(file,'http://192.168.15.130:8080/checksammyrest/product/uploadImage', options1)
 .then((data) => {
   // success
   alert("success");
 }, (err) => {
   // error
   alert("error"+JSON.stringify(err));
 });

  }

感谢您的帮助。

0 个答案:

没有答案