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

Question

We have Angular Controller as follows

$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);                    
            }

Restangular post as follows

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

Java VOs as follows

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;
}

}

and

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;
}
}

Spring controller as follows

@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;
}

We have uploaded two files and JSON Object, CustomerName and CustomerID mapped properly with corresponding VO, but ProductList not mapped with the VO.We are getting null in ProductList, Debug mode screenshot attached for refrence. May help to resolve this?

Answer 1

You have to use Blob with correct content type to pass the JSON data and add it to the form ( https://developer.mozilla.org/en/docs/Web/API/Blob ), eg:

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

EDIT: Updated the code to be absolutely clear and avoid any typos, case sensitivity issues, wrong placement of parenthesis etc.