![](/img/trans.png)
[英]unable to upload multiple files at once in angular + spring boot app
[英]upload files, angular spring boot
我需要使用 angular 和 spring 引导上传文件。
Angular 服务:
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json;multi-part/form-data'})
};
addProduct(productRequest: ProductRequest, creator: string, tradeReference: string, selectedImage: File) {
const trimCreator = creator.trim();
const trimTradeReference = tradeReference.trim();
const formData = new FormData();
formData.append('images', selectedImage);
return this.http.post<any>(baseUrl + '/addProduct', {formData, productRequest, trimCreator, trimTradeReference} , httpOptions)
.pipe(
catchError(this.handleError)
);
}
我的后端 Rest 服务如下:
@ApiOperation(value = "add product", response = Iterable.class)
@ApiResponses(value = { @ApiResponse(code = 200, message = "Successfully added product") })
@PostMapping("/addProduct")
public void addProduct(@RequestPart(value = "images") MultipartFile[] images,
@RequestPart(value = "product") Product product,
@RequestPart(value = "creator") @ApiParam(value = "creator") String creator,
@RequestPart(value = "tradeReference") @ApiParam(value = "tradeReference") String tradeReference
) throws Exception {
Arrays.asList(images)
.stream()
.forEach(image -> uploadImages(image, product));
traderServices.addProduct(product, creator, tradeReference);
}
错误:
{"timestamp":"2020-04-23T13:35:03.114+0000","status":500,"error":"Internal Server Error","message":"当前请求不是多部分请求"," trace":"org.springframework.web.multipart.MultipartException: Current request is not a multipart request\r\n\tat org.springframework.web.servlet.mvc.method.annotation.RequestPartMethodArgumentResolver.resolveArgument(RequestPartMethodArgumentResolver.java:158 )\r\n\tat,"路径":"/api/trader/addProduct"}
我试图像更新 PostMapping
@PostMapping(value = "/'addProduct", 消耗 = {MediaType.MULTIPART_FORM_DATA_VALUE, MediaType.APPLICATION_JSON_VALUE})
我还删除了 angular 服务中的消费信息和 header 信息,但它不起作用。
使用 postman,它工作正常。
所以无法理解为什么它不起作用!
谢谢
解决方案:
//角度服务:
const options = {} as any;
addProduct(productRequest: ProductRequest, selectedImages: File[]) {
const formData = new FormData();
for (let i = 0; i < selectedImages.length; i++) {
formData.append('images', selectedImages[i]);
}
Object.keys(productRequest).forEach((key) => {formData.append(key, productRequest[key]); });
return this.http.post<any>(baseUrl + '/addProduct', formData , options)
.pipe(
catchError(this.handleError)
);
}
//弹簧 REST 服务:
@ApiOperation(value = "add product", response = Iterable.class)
@ApiResponses(value = { @ApiResponse(code = 200, message = "Successfully added product") })
@PostMapping("/addProduct")
public void addProduct(@RequestPart(value = "images") @ApiParam(value = "images") MultipartFile[] images,
@RequestPart(value = "productName") @ApiParam(value = "productName") String productName,
@RequestPart(value = "description") @ApiParam(value = "description") String description,
@RequestPart(value = "realPrice") @ApiParam(value = "realPrice") String realPrice,
@RequestPart(value = "category") @ApiParam(value = "category") String category,
@RequestPart(value = "creator") @ApiParam(value = "creator") String creator,
@RequestPart(value = "tradeReference") @ApiParam(value = "tradeReference") String tradeReference
) throws Exception {
Product p = createProduct(productName, description, Double.valueOf(realPrice), category, creator, tradeReference);
Arrays.asList(images)
.stream()
.forEach(image -> uploadImages(image, p));
traderServices.addProduct(p);
}
请注意,产品 object 被拆分为参数以避免诸如“不支持内容类型'application/octet-stream'”和“不支持内容类型'multipart/form-data'”之类的错误。 将 'realPrice' 参数类型更改为 Double,生成类型为“不支持内容类型 'application/octet-stream'”的异常,它适用于字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.