javascript - 无法使用 Java 和 Angular js 在一个请求中上传多张图像

Question

我可以上传带有表单数据的单个图像。但现在我想上传带有表单数据的多个图像。我已经引用了很多答案，但仍然在服务器代码中，文件为空。

在 Angular Controller 中，表单数据附加文件列表，但在 Spring Controller 中为空。请帮忙，

实体

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

@Column(name="itemName", unique = true)
private String itemName;
     
@Column(name="twoDByteArray",columnDefinition="mediumblob")
private byte[][] twoDByteArray=new byte[10][];

Controller.java

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

    if(file!=null){
        byte[][] data1 = new byte[10][];  
        byte[] contents = file.getBytes();
        data1[0] = contents;
        product.setTwoDByteArray(data1);
    }
    return product;
}

Controller.js

scope.addProduct = function (product,files) {
    alert(product);
    alert(files);
        scope.files = files;
        if (files && files.length) {
            Upload.upload({
                url: '/Admin_Test/addProduct',
                /*fields: {'username': 'Roja'}, // additional data to send
                files: files*/
                data: {
                    files: files,'product':product
                }
            }).then(function (response) {
                timeout(function () {
                    scope.result = response.data;
                });
            }, function (response) {
                if (response.status > 0) {
                    scope.errorMsg = response.status + ': ' + response.data;
                }
            }, function (evt) {
                scope.progress = 
                    Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        }
    };

HTML

<input type="file" ngf-select ng-model="$files" multiple 
 name="file" accept="image/*" ngf-max-size="2MB" required /> 
        <!--  <div class="col-sm-4 form-group ">
            <input type="file" name="file" id="file" multiple="true" >
        </div> -->
                        
<input type="submit" name="Submit" class="btn btn-primary"
value="Submit" ng-click="addProduct(product,$files)" />
                        

编辑

使用 ng-upload 后，我可以在控制台中看到图像详细信息，但这些详细信息不存在于文件中。

DEBUG CommonsMultipartResolver:287 - Found multipart file [files[0]] of size 3384 bytes with original filename [hh1.png], stored in memory

DEBUG CommonsMultipartResolver:287 - Found multipart file [files[1]] of size 8591 bytes with original filename [hh.png], stored in memory

谢谢。

Answer 1

试试这个
前端

function uploadFiles(files){
        return Upload.upload({
            url : "your_url",
            method : "POST",
            headers: {
                "Content-Type": undefined
            },
            file: files,
            arrayKey: ''
        });
}

后端

@RequestMapping(value = {"/uploadFiles"}, method = RequestMethod.POST)
public ResponseEntity<?> uploadFiles(@RequestParam("file") List<MultipartFile> file){...}