Question

我有一个基本问题。可以在Angular和Java Spring中发送两个参数形式的POST方法。一个参数是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

您始终可以将其转换为BASE64。然后，这是一个简单的字符串，您只需在JSON（或其他字符串）中传递它即可。

编辑

这是我每次用户上传文件时要做的事情。将选择的文件转换为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);

Answer 2

这取决于您的后端。如果将图像作为多部分文件，则无法使用它发送json数据。但是，您可以将其他所需的值附加到表单数据中。如果将图像作为base64文件，则可以使用json对象发送数据。

Answer 3

您好，您需要按照以下步骤操作。

将文件转换为以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; });
现在，您必须使用formdata作为
发送base64。
formdata.append('base64', base64); // base64 from the method
现在在JAVA获得base64，并在JAVA结束处将其转换为File。

谢谢：）如有疑问，请留言并竖起大拇指

Answer 4

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

您可以像这样添加多个密钥对值。

如果太多，也可以在for循环中迭代

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

发送带有图片的JSON对象

4 个答案: