Ionic 3 post image с использованием данных формы

Question

Я пытаюсь опубликовать данные формы, состоит из текста и файла изображения на сервер PHP.Я использую собственную ионную камеру, чтобы получить изображение из галереи:

const options: CameraOptions = {
    quality: 70,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    saveToPhotoAlbum:false,
    targetWidth: 400,
    targetHeight: 400
}

this.camera.getPicture(options).then((imageData) => {
  this.myphoto = normalizeURL(imageData);
  this.myphoto2 = imageData;
}, (err) => {

});

и разместить его, используя данные формы:

var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=' + Math.random());
headers.append('Accept', 'application/json');
let options = new RequestOptions({
    headers: headers
});
let formData = new FormData();
formData.append('judul', this.judul.value);
formData.append('photo', this.myphoto, '123.jpg');
this.http.post('http://localhost/upload.php', formData, options)
    .map(...)
    .subscribe(...);

Но, как я видел в журнале PHP, данные формы неотправлено ионным.Что здесь не так?

Answer 1

Я советую вам использовать собственный плагин для загрузки файла:

https://ionicframework.com/docs/native/file-transfer/

Answer 2

Сначала сделайте снимок с камеры

async takePhoto() {
const options: CameraOptions = {
    quality: 70,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    saveToPhotoAlbum:false,
    targetWidth: 400,
    targetHeight: 400
}

this.camera.getPicture(options).then((imageData) => {
  this.getSystemURL(imageData);
}, (err) => {

});
}

, чем получите URL-адрес изображения локальной системы

private getSystemURL(imageFileUri: any): void {
    this.file.resolveLocalFilesystemUrl(imageFileUri)
        .then(entry => (entry as FileEntry).file(file => {
          this.readFile(file);
        }))
        .catch(err => console.log(err));
  }

После прочтения URL-адреса изображения

private readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      this.myphoto = new Blob([reader.result], {type: file.type});
      var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=' + Math.random());
headers.append('Accept', 'application/json');
let options = new RequestOptions({
    headers: headers
});
let formData = new FormData();
formData.append('judul', this.judul.value);
formData.append('photo', this.myphoto, '123.jpg');
this.http.post('http://localhost/upload.php', formData, options)
    .map(...)
    .subscribe(...);
    };
    reader.readAsArrayBuffer(file);
  }

Работаетдля меня, надеюсь, это поможет.

Answer 3

1. Вы можете попробовать удалить 'options' из аргументов this.http.post ().Ваш код становится:

   this.http.post ('http://localhost/upload.php', formData) .map (...) .subscribe (...);

2. Если это не работает, попробуйте отправить все изображение BASE64, используя

   'destinationType: this.camera.DestinationType.DATA_URL'