Question

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

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

实体

@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 - 找到大小为3384字节的多部分文件[files [0]]，原始文件名[hh1.png]，存储在内存中

DEBUG CommonsMultipartResolver：287 - 找到大小为8591字节的多部分文件[files [1]]，原始文件名[hh.png]，存储在内存中

谢谢。

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){...}

Answer 2

尝试以下代码。

角度控制器

Upload.upload({
   url: '/Admin_Test/addProduct',
   files: files,
   data: product
})

Spring Controller

@RequestMapping(value = "/addProduct", method = RequestMethod.POST)
@ResponseBody
public Product addProduct(@RequestPart("files") MultipartFile[] files, Product product,HttpSession session, HttpServletRequest request, HttpServletResponse response)
        throws IOException, SerialException, SQLException {
    if(files!=null){
        System.out.println("In multiple img..."+files +"..."+product);
        System.out.println(product +""+ files);//null null
    }
}

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

2 个答案: