使用 Angular Js 和 Spring Mvc 上传带有表单的图像时出错

Question

我已经成功使用AngularJS和Spring Mvc将图像上传到数据库中。但是现在我需要添加表单字段并同时提交。 请帮帮我。这是我的代码。

controller.js

scope.product = {};
scope.addProduct=function(product){
var formData=new FormData();
formData.append("file",file.files[0]);
formData.append("product",angular.toJson(product));
http({
    method: 'POST',
    url: '/name/addProduct',
    headers: { 'Content-Type': undefined},
    data: formData,
        })
       .success(function(data, status) {                       
            alert("Success ... " + status);
        })
        .error(function(data, status) {
            alert("Error ... " + status);
        });
        };

Controller.java

@RequestMapping(value = "/addProduct",consumes = {"multipart/form-data"}, method = RequestMethod.POST)
@ResponseBody
public Product addProduct(Product product,
        @RequestPart("file") MultipartFile file,
        HttpSession session, HttpServletRequest request,
        HttpServletResponse response)
                throws IOException, SerialException, SQLException{

    byte[] mediaBytes = file.getBytes();
    product.setImage(mediaBytes);
    Product product2 = adminService.addProduct(product);
    return product2;
}

Product.java

public class Product {

@Id
@Column(name="productId")
private Integer productId;

@Column(name="itemName")
private String itemName;

@ManyToOne
@JoinColumn(name="categoryId",insertable=true, updatable=true,
        nullable=false)
//@JsonManagedReference
private Category categoryId;

@Column(name="image",columnDefinition="mediumblob")
private byte[] image;

@Transient
private String statusMessage;

@Transient
private Long CategoryValue; 
//getters and setters
}

addItem.html

<form name="myForm" role="form" class="addItem" autocomplete="off"
id="addItem" enctype="multipart/form-data">

<input type="text" class="form-control" name="productId" ng-model="product.productId" placeholder="Product Id" ng-minlength="4" maxlength="4" required />

<input class="form-control" name="itemName" type="text" ng-model="product.itemName" required />

<input type="text" class="form-control" name="categoryValue" ng-model="product.categoryValue" required />

<input type="file" name="file" id="file" />
<input type="submit" name="Submit" class="btn btn-primary"
value="Submit" data-ng-disabled="myForm.$invalid"
                            ng-   click="myForm.$invalid=true;addProduct(product)" /> 
            </form>

堆栈跟踪

ServletInvocableHandlerMethod:164 - Failed to resolve argument 0 of type 'com.tta.abcd.model.Product'
org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'properties' is not present
    at org.springframework.web.multipart.support.RequestPartServletServerHttpRequest.<init>(RequestPartServletServerHttpRequest.java:70)
    at org.springframework.web.servlet.mvc.method.annotation.RequestPartMethodArgumentResolver.resolveArgument(RequestPartMethodArgumentResolver.java:126)

更新

删除@RequestPart("properties") 后，控制器中的产品数据为空。

我尝试了很多方法后在这里发布。 请帮帮我。

谢谢。

Answer 1

您必须在 spring 上下文文件中提及以下 bean id。

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="10000000"/></bean>

如果您使用的是 maven，也请添加依赖项。

<!-- Apache Commons FileUpload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>

<!-- Apache Commons IO -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.5</version>
</dependency>

Answer 2

你的变量名没有加起来。

角度

formData.append("product",angular.toJson(product))

但是在春天你已经叫它了

@RequestPart("properties") Product product

这可能是问题吗？

Answer 3

我已经解决了我的问题。我正在发布我所做的更改，如果有人需要的话。

Controller.js

formData.append("file",file.files[0]);
formData.append("product",new Blob([JSON.stringify(product)],{type: "application/json"}));

Controller.java

public Product addProduct(@RequestPart("file") MultipartFile file,
        @RequestPart("product")Product product,
        HttpSession session, HttpServletRequest request,
        HttpServletResponse response)throws IOException, SerialException, SQLException{

    byte[] mediaBytes = file.getBytes();
    product.setImage(mediaBytes);
    Product product2 = adminService.addProduct(product);
    return product;
}

在这些更改之后，我的代码运行良好。

Answer 4

 formData.append("file",file.files[0]);
 formData.append("user",new Blob([JSON.stringify(user)],{type: "application/json"}));
                http({
                    method: 'POST',
                    url: '/projectName/url',
                    headers: { 'Content-Type': undefined},//to set boundary value by default
                    data: formData,
                        })