У меня есть приложение ionic 3; Я работаю над функцией загрузки изображения профиля. Здесь я хочу выбрать изображение из галереи или сделать снимок с помощью камеры. После этого у меня будет два image / image_paths. Я хочу загрузить эти два изображения вместе с user_id, access_token

Выберите изображение из галереи let option = {title: 'Выбрать изображение', сообщение: 'Выбрать минимум 1 изображение', maximumImagesCount: 1, outType: 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);
        })

Выберите изображение из параметров камеры: 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) => {
          // 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);
        });

Пожалуйста, посмотрите приведенный выше код, и, если он правильный, предложите мне, как написать функцию загрузки с данными формы или любым другим методом.

[Это снимок экрана с первой попыткой загрузки изображений ] [1]

This is a screenshot of the second way I tried uploading images

0
Pranav Mandlik 14 Мар 2018 в 09:03

2 ответа

Лучший ответ

Даже я некоторое время назад столкнулся с той же проблемой и не нашел подходящего решения в Интернете. Ниже представлено решение, которое я нашел после некоторых исследований и отлично работает не только для изображений, но и для других файлов. Поскольку заданный вопрос касается изображений, я объясню ответ относительно изображений. (За исключением выбора файлов, процедура остается той же для других файлов).

  1. Вы можете выбрать изображение с помощью плагина камеры Cordova. После установки плагина и его импорта на app.module.ts и добавив его к провайдеру, вы можете использовать приведенный ниже код для выбора изображений с камеры или из галереи. 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)
});
  1. После выбора изображения вам необходимо преобразовать его в base64 с помощью плагина com-badrit-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)
});
  1. Теперь отправьте данные на сервер через ваш API. Для этого можно использовать cordova-plugin-advanced-http или Angular-http. API должен принимать изображения в формате массива вместе с другими параметрами. Поскольку изображения base64 будут строкой с большей длиной, рекомендуется использовать formData или row вместо формата с кодировкой URL для метода публикации REST.
  2. Теперь в бэкенде тело будет проанализировано, и массив изображений будет извлечен. Во всех популярных серверных языках (Java, PHP, NodeJS, C # и т. Д.), Которые используются для написания API, есть бесплатные библиотеки для преобразования изображения base64 в фактическое изображение.
  3. Вот и все, теперь вы можете отправлять несколько изображений на свой сервер через API. Наряду с изображениями, если вы пытаетесь выбрать файлы любого другого типа MIME (pdf, doc, docx и т. Д.), Вы можете использовать для этого тот же подход.

Я также создал репозиторий git Hub по адресу: https://github.com/coolvasanth/upload-multiple-image-files-in-Ionic-3-4/blob/master/README.md

3
Vasanth 23 Окт 2018 в 13:03

Прежде всего, вам нужно создать 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

Прежде всего вам нужно вставить HttpClientModule в раздел импорта файла app.module.ts

Затем добавьте private http: HttpClient внутрь constructor и saveProfileImage() функционального класса

изменение в 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
      });
  });

}
1
Utpaul 14 Мар 2018 в 09:28