JSON对象和分段文件上传不起作用答案

【问题标题】：JSON object and Multipart file upload not workingJSON对象和分段文件上传不起作用
【发布时间】：2015-09-16 12:28:37
【问题描述】：

我们有如下的 Angular 控制器

$scope.uploadData = function (files, data) {
                var fd = new FormData();
                fd.append("CustomerName", "Mahesh"); //As of now mocking the entities for creating form data 
                fd.append("CustomerID ", "44444");
                fd.append("ProductList",  JSON.stringify([{ProductID: '0001', ProductName: 'Samsung'},{ProductID: '0002', ProductName: 'Voldats'}]));
                fd.append("file", files[0]);
                fd.append("file", files[1]);
                inventoryService.Postfile(fd);                    
            }

长角柱如下

Postfile : function (formData) {
                return restangular.all("postfile").withHttpConfig({transformRequest: angular.identity}).customPOST(formData, '', undefined, {'Content-Type': undefined});
                 },

Java VO如下

public class ProductList implements Serializable{
private String ProductID;
private String ProductName;

public String getProductID() {
    return ProductID;
}

public void setProductID(String productID) {
    ProductID = productID;
}

public String getProductName() {
    return ProductName;
}

public void setProductName(String productName) {
    ProductName = productName;
}

}

和

public class CustomerList implements Serializable{
String CustomerName;
String CustomerID;
List<ProductList> ProductList;

public String getCustomerName() {
    return CustomerName;
}

public void setCustomerName(String customerName) {
    CustomerName = customerName;
}

public String getCustomerID() {
    return CustomerID;
}

public void setCustomerID(String customerID) {
    CustomerID = customerID;
}

public List<ProductList> getProductList() {
    return ProductList;
}

public void setProductList(List<ProductList> productList) {
    ProductList = productList;
}
}

弹簧控制器如下

@ResponseStatus(HttpStatus.OK)
@RequestMapping(value = "/api/postfile", method = RequestMethod.POST)
public @ResponseBody
IhmsVO postfile(@RequestParam("file") List<MultipartFile> files,
        @ModelAttribute(value = "data") CustomerList vo, BindingResult bindingResult, Model model) {

    System.out.println("Post file");
    System.out.println(vo.getProductList());
    System.out.println("Files :: " + files + "  " + files.size());
    return null;
}

我们上传了两个文件和 JSON 对象，CustomerName 和 CustomerID 与相应的 VO 正确映射，但 ProductList 未与 VO 映射。我们在 ProductList 中得到空值，附上调试模式截图以供参考。可以帮助解决这个问题吗？

【问题讨论】：

标签： json angularjs spring spring-mvc

【解决方案1】：

您必须使用具有正确内容类型的 Blob 来传递 JSON 数据并将其添加到表单 (https://developer.mozilla.org/en/docs/Web/API/Blob)，例如：

fd.append("ProductList",  new Blob([ JSON.stringify([{ProductID: '0001', ProductName: 'Samsung'},{ProductID: '0002', ProductName: 'Voldats'}]) ], { type: "application/json" }));

编辑：将代码更新为绝对清晰，避免任何拼写错误、区分大小写问题、括号放置错误等。

【讨论】：

我们实际上是在使用 Angular 来构建应用程序。我们已经按照您的建议进行了尝试。但是我们在角度中遇到了以下异常。 TypeError：无法构造“Blob”：第一个参数既不是数组，也没有索引属性。（…）
实际上，你必须将字符串化的 json 嵌入到数组中，即 new Blob([ JSON.stringify(...) ], {类型：... });
我们已按照您的建议进行了修改，即 new Blob([ JSON.stringify(...) ], { type: ... })，错误已纠正。但是我们仍然在 Spring 控制器的 ProductList 中得到空值。是否需要更改弹簧控制器中的任何内容？