java - 将图像从 Angular 上传到 SpringBoot
问题描述
我尝试了几个小时将图像从 Angular 发送到 SpringBoot。现在我收到此错误:
org.springframework.web.multipart.MultipartException:当前请求不是多部分请求
前端(Angular)代码如下所示:
saveProduct(productSave: ProductSave, mainImg: File, imageList: File[]): Observable<any>
{
const formData = new FormData();
const formListData = new FormData();
formData.append('mainImg', mainImg, mainImg.name);
imageList.forEach( img => formListData.append('imageList', img));
return this.httpClient.post<ProductSave>(this.saveUrl, {productSave, mainImg, imageList});
}
mainImg 和 imageList 是用户上传的图片,初始化如下:
mainImg = event.target.files[0];
imageList.push(event.target.files[0]);
我的后端(SpringBoot)代码如下所示:
@PostMapping("/save")
public void saveProduct(@RequestBody ProductSave productSave, @RequestParam("mainImg")MultipartFile main, @RequestParam("imageList")MultipartFile[] multipartFiles)
{
System.out.println(productSave.getProduct().getName());
}
我真的不知道如何发送这些图像,我试图环顾堆栈但我失败了。
谢谢你的帮助!
解决方案
问题出在 Spring Boot Controller 方法参数中。
在多部分请求中,您可以发送 JSON 请求正文。相反,您将不得不发送键值对。
所以,你有两种方法可以做你想做的事——
- 发送 JSON 字符串,然后对其进行反序列化。
Spring Boot API 示例:-
@PostMapping("/save")
public String create(@RequestPart("file")MultipartFile multipartFile, @RequestPart("files") List<MultipartFile> multipartFiles, @RequestPart("jsonString") String jsonString) {
/** To convert string to POJO
com.fasterxml.jackson.databind.ObjectMapper objectMapper = new com.fasterxml.jackson.databind.ObjectMapper();
ProductSave productSave = this.objectMapper.readValue(jsonString,ProductSave.class); **/
return jsonString;
}
HTML/Javascript 示例:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="file" id="file">
<button onclick="submitData()">Submit Data</button>
<script type="text/javascript">
function submitData() {
const formData = new FormData();
const fileField = document.querySelector('input[id="file"]');
formData.append('jsonString', JSON.stringify({document: {data: 'value'}}));
formData.append('file', fileField.files[0]);
Array.from(fileField.files).forEach(f => formData.append('files', f));
fetch('http://localhost:8080/save', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(result => {
console.log('Success:', result);
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
</body>
在前端: -
JSON.stringify(product);
- 将文件作为字节数组发送,在这种情况下,您不需要在前端使用表单数据。
您可以使用以下方法将文件对象转换为前端的字节数组:-
const fileToByteArray = async (file) => {
return new Promise((resolve, reject) => {
try {
let reader = new FileReader();
let fileByteArray = [];
reader.readAsArrayBuffer(file);
reader.onloadend = (evt) => {
if (evt.target.readyState === FileReader.DONE) {
const arrayBuffer = evt.target.result;
const array = new Uint8Array(arrayBuffer);
array.forEach((item) => fileByteArray.push(item));
}
resolve(fileByteArray);
};
} catch (e) {
reject(e);
}
});
};
推荐阅读
- sockets - recvfrom icmp 数据包没有 ip 标头
- amazon-web-services - CodePipeline 有条件地跳过管道中的操作,而不会导致管道失败
- javascript - 将矩阵转换为按列的新平面数组
- android - Metro 服务器向本地节点快速应用程序发布请求,通过 USB 连接手机
- bokeh - 散景:通过 JS 回调将 onclick 事件强制为图例
- android - Jetpack Compose - 点击坐标与矩形坐标不匹配
- react-native - 不显示音轨和播放/暂停的音频背景模式控件不适用于 react-native-track-player
- r - 如何在服务器上从 github 安装包?
- windows - 通过 Chef 运行 Powershell 脚本 - 转义字符语法无效
- git - 为什么我使用 git mirror 命令时会出错?