Захват и загрузка изображения на сервер с помощью Ionic 4 - PullRequest
1 голос
/ 23 июня 2019

Я пытался захватить изображение и загрузить его на сервер в течение нескольких дней, но безуспешно. Я использую Ionic 4 для своей клиентской стороны и Java в качестве моего бэкэнда (я использовал Джерси, чтобы выставить свой бэкэнд для REST).

Теперь проблема в том, что после получения изображения и его загрузки я продолжаю получать ноль в своем бэкэнде.

Вот мой код на стороне клиента:

    openCam(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      cameraDirection: 1
    }

    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     //alert(imageData)
     this.imageData = imageData;
     this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
     this.isImageCaptureed = true;

    }, (err) => {
     // Handle error
     alert("error "+JSON.stringify(err))
    });
  }


    upload(){
      let  url = 'http://mydommain/api/upload';
      let dataURL  = 'data:image/jpeg;base64,' + this.imageData;
      let  postData = new FormData();
      postData.append('file', dataURL);

      let data:Observable<any> = this.http.post(url,postData);
      data.subscribe((result) => {
        console.log(result);
      });
  }

Я пытался передать imageData непосредственно в FormData объект, я также пытался преобразовать его с помощью функции DataURIToBlob(), как я обнаружил при некоторых других подобных проблемах, но все еще не повезло ..

    dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

Я знаю, что проблема только в формате imageData. Так как мне удалось отправить, чтобы выбрать файл, используя тег ввода HTML, и загрузить его, используя ту же функцию upload(), что и выше, и мой бэкэнд API.

Ответы [ 2 ]

0 голосов
/ 01 июля 2019

Вот как мне удалось решить эту проблему:

Проблема была в основном связана с: destinationType: this.camera.DestinationType.FILE_URI,

это должно быть изменено на destinationType: this.camera.DestinationType.DATA_URL,

Вот рабочий код:

 constructor(private camera: Camera,
          private http: HttpClient) { }


  image:any=''
  isImageCaptureed = false;
  imageData;
  data;
  dataURL;

  openCam(){
   const options: CameraOptions = {
   quality: 100,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE,
   correctOrientation: true
   }

   this.camera.getPicture(options).then((imageData) => {
   this.imageData = imageData;
   this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
   this.isImageCaptureed = true;
  }, (err) => {
  // Handle error
    alert("error "+JSON.stringify(err))
  });
}

upload(){
let  url = 'your API url';
const date = new Date().valueOf();

// Replace extension according to your media type
const imageName = date+ '.jpeg';
// call method that creates a blob from dataUri
const imageBlob = this.dataURItoBlob(this.imageData);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' })

let  postData = new FormData();
postData.append('file', imageFile);

let data:Observable<any> = this.http.post(url,postData);
data.subscribe((result) => {
  console.log(result);
});
}


dataURItoBlob(dataURI) {
  const byteString = window.atob(dataURI);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const int8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    int8Array[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([int8Array], { type: 'image/jpeg' });    
  return blob;
}
0 голосов
/ 23 июня 2019

Попробуйте преобразовать в данные BLOB-объекта перед назначением для объекта FormData.

const formData = new FormData();
const imgBlob = new Blob([reader.result], {
   type: file.type
});
formData.append('file', imgBlob, file.name);

Ссылка: https://devdactic.com/ionic-4-image-upload-storage/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...