Отправленный объект JSON с изображением

Question

У меня есть основной вопрос.Можно отправить метод POST с двумя параметрами в Angular и Java Spring.Один параметр - это объект JSON, второй - изображение.

У меня есть простой пример на Angular, чтобы объяснить, что я хочу:

addHero(file: File,category: CategoryModel): Observable<any> {
const formdata: FormData = new FormData();

formdata.append('file', file);
return this.http.post<File>(this.cateogryUrl, {formdata,category} )
  .pipe(
   // catchError(this.handleError('addHero', file))
  );

}

Answer 1

Здравствуйте, вам нужно выполнить следующие шаги.

1. Преобразовать файл в базу 64 как

   function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } getBase64(file).then(base64=>{ var base64 = base64; });

2. Теперь вам нужно отправить base64 с данными формы в виде

   formdata.append('base64', base64); // base64 from the method

3. Теперь получите base64 в JAVA и конвертируйте его в файл в конце JAVA.

Спасибо :) любой вопрос, пожалуйста, прокомментируйте, если вы получите свою вещь

Answer 2

formdata.append('file', file);
formdata.append('key1', value1);
formdata.append('key2', value2);

Вы можете добавить несколько значений пары ключей следующим образом.

Если их слишком много, вы также можете повторить цикл for

for(let key in someObject){
   formdata.append(key, someObject[key]);
}

Answer 3

Это зависит от вашего бэкэнда.Если он принимает изображение как мультифайл, вы не можете отправлять данные json вместе с ним.Но вы можете добавить другие значения, которые желательны для данных формы.Если для изображения используется файл base64, вы можете использовать объект json для отправки данных.

Answer 4

Вы всегда можете конвертировать его в BASE64.Тогда это простая строка, которую вы можете просто передать в JSON (или другую).

EDIT

Это то, что я делаю в моем случае каждый раз, когда пользователь загружает файл.Просто преобразуйте выбранный файл в строку BASE64.Есть несколько действительно хороших ресурсов по этому поводу.

onFileChanged(event) {
 const file = event.target.files[0];
 if (file.type.split('/')[0] !== 'image') {
  this.validFile = false;
 }
 this.imageUploadModel.ImageType = file.type.split('/')[1];

 const myReader: FileReader = new FileReader();
 myReader.onloadend = (e) => {
   this.imageUploadModel.Base64String = myReader.result.toString();
};
  myReader.readAsDataURL(file);
}

Это моя модель

export class ImageUploadModel {
  Title: string;
  Description: string;
  ImageType: string;
  Base64String: string;
}

И я приведу ее в соответствие, чтобы я мог отправить ее в теле запроса:

 const body = JSON.stringify(this.imageUploadModel);