在模型类中添加多部分文件

Question

我是AngularJs和spring boot的新手，我正尝试上传项目数据和项目图片，因此出现错误“无法构造多部分文件实例” 所以请建议我该怎么做。

在这里您可以看到我正在获得发帖请求的Spring boot Web服务

@CrossOrigin(allowedHeaders = { "Content-Type" })
@RequestMapping(value = "addmenu", method = RequestMethod.POST)
public ResponseEntity<?> addMenu(@RequestBody AddMenuDto dto) {
    logger.info("call add Item!!! ");
    Map<String, Object> responseMap = new HashMap<>();
    MenuItem menuitem=new MenuItem();
    HttpStatus status;
    try {
        menuitem.setMenuName(dto.getName());
        menuitem.setMenuDescription(dto.getDescription());
        menuitem.setMenuCredit(dto.getCredit());
        menuitem.setCreatedAt(new Timestamp(new Date().getTime()));

        String fileName = fileStorageService.storeFile(dto.getFile());

        String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath().path("/downloadFile/")
                .path(fileName).toUriString();

        menuitem.setMenu_image(fileDownloadUri);

        responseMap.put("yourItem", checkUserService.addItem(menuitem));
        responseMap.put("message", "Item has been added Successfully");
        status = HttpStatus.OK;

另一个具有多部分文件的模型类...

public class AddMenuDto implements Serializable {
/**
 * 
 */
private static final long serialVersionUID = 1L;
private String name;
private String description;
private String credit;
@JsonDeserialize(contentAs = CommonsMultipartFile.class)
private MultipartFile file;
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
public String getDescription() {
    return description;
}
public void setDescription(String description) {
    this.description = description;
}
public String getCredit() {
    return credit;
}
public void setCredit(String credit) {
    this.credit = credit;
}
public MultipartFile getFile() {
    return file;
}
public void setFile(MultipartFile file) {
    this.file = file;
}

}

现在您可以看到angularJs

$scope.addMenueItems = function() {


    var req = {
        method : 'POST',
        url : config.apiUrl + "/addmenu",
        data: $scope.fd
    }





    $http(req).then(function successCallback(response) {
        if(response.status == 200){
            alert(response.data.message);

和html文件

  <form role="form">
              <div class="box-body">

                <div class="row">
                  <div class="col-xs-6">
                  <label for="exampleInputEmail1">Menu Name</label>
                  <input type="text" style="background: #fff;" class="form-control" ng-model="fd.name">
                  </div>
                  <div class="col-xs-6">
                    <label for="exampleInputEmail1">Menu Details</label>
                    <input type="text" style="background: #fff;" class="form-control" ng-model="fd.description">
                  </div>
                </div>

                <br/>

                <div class="row">
                  <div class="col-xs-6">
                  <label for="exampleInputEmail1">Menu Credit</label>
                  <input type="text" style="background: #fff;" class="form-control" ng-model="fd.credit">
                  </div>
                  <div class="col-xs-6">
                    <label for="exampleInputEmail1">Menue Image</label>
                    <input type="file" style="background: #fff;" class="form-control" file-model="fd.file">
                  </div>
                </div>

                <br />


               <div class="box-footer">
                <button type="submit" class="btn btn-primary" ng-click="addMenueItems()">Save Details</button>
              </div>
              </div>
            </form>
          </div><!-- /.box -->

所以我无法追踪环路孔在哪里。也因为这个问题而卡住了。

预先感谢您的帮助。