上传文件，angular spring boot [英] upload files, angular spring boot

问题描述

我需要使用 angular 和 spring boot 上传文件.

角度服务:

 const httpOptions = {标头:新的 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
所以无法理解为什么它不起作用！
谢谢
解决方案
解决方案:
//角度服务:
const options = {} as any;addProduct(productRequest: ProductRequest, selectedImages: File[]) {const formData = new FormData();for (let i = 0; i  {formData.append(key, productRequest[key]); });返回 this.http.post(baseUrl + '/addProduct', formData , options).管道(catchError(this.handleError));}
//Spring REST 服务:
 @ApiOperation(value = "add product", response = Iterable.class)@ApiResponses(value = { @ApiResponse(code = 200, message = "产品添加成功") })@PostMapping("/addProduct")public void addProduct(@RequestPart(value = "images") @ApiParam(value = "images") MultipartFile[] 图像，@RequestPart(value = "productName") @ApiParam(value = "productName") String productName,@RequestPart(value = "description") @ApiParam(value = "description") 字符串描述，@RequestPart(value = "realPrice") @ApiParam(value = "realPrice") String realPrice,@RequestPart(value = "category") @ApiParam(value = "category") 字符串类别，@RequestPart(value = "creator") @ApiParam(value = "creator") 字符串创建者，@RequestPart(value = "tradeReference") @ApiParam(value = "tradeReference") String tradeReference) 抛出异常 {产品 p = createProduct(productName, description, Double.valueOf(realPrice), category, creator, tradeReference);Arrays.asList(图像).溪流().forEach(image -> uploadImages(image, p));traderServices.addProduct(p);}
请注意，产品对象被拆分为参数以避免出现不支持内容类型‘应用程序/八位字节流’"和不支持内容类型‘多部分/表单数据’"之类的错误.将 'realPrice' 参数类型更改为 Double，生成不支持内容类型 'application/octet-stream'"类型的异常，它适用于字符串.
I need to upload files using angular and spring boot.

Angular service: 
 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)
      );
  }
and my backend Rest service is the following: 
    @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);
    }
The error: 

  
{"timestamp":"2020-04-23T13:35:03.114+0000","status":500,"error":"Internal
  Server Error","message":"Current request is not a multipart
  request","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
  ,"path":"/api/trader/addProduct"}
I tried to update PostMapping like 

  
@PostMapping(value = "/'addProduct", consumes =
  {MediaType.MULTIPART_FORM_DATA_VALUE,
  MediaType.APPLICATION_JSON_VALUE})
also I deleted consumes information and header informations in angular service, but it doesn't work.

With postman, it works fine.



So can't understand why it doesn't work! 

Thanks 
解决方案
Solution:

//Angular service:  
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)
          );
      }
//Spring REST Service: 
 @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);
    }
note that Product object is splitted into parameters to avoid errors like "Content type 'application/octet-stream' not supported" and "Content type 'multipart/form-data' not supported". Changing 'realPrice' parameter type to Double, generate an exception of type "Content type 'application/octet-stream' not supported", it works with Strings. 

                        
这篇关于上传文件，angular spring boot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！