在danialfarid angular-file-upload中請求不同的文件

Question

我使用danialfarid angular-file-upload來上傳文件。 我想發送帶有兩個文件和一個json字符串的請求。 服務器端的每兩個文件都有不同的參數。 服務器端使用彈簧支架。 我怎么發送？

這是我的角度服務。

services.factory('USR008Service', function($resource, $http, $upload) {
    return {
        insertUSR008FUN01 : function(talent, talentFile, coverImg) {
            return $upload.upload({
                url: contextRoot + '/insertUSR008FUN01',
                fields: {
                    'USR008REQ02': JSON.stringify(talent),
                },
                file: coverImg,
                fileFormDataName : 'coverImg'
            });
        }
    }   
});

這是我的服務器端控制器。

@RequestMapping(value = URIConstant.insertUSR008FUN01, method = RequestMethod.POST, produces = "application/json; charset=utf-8")
public @ResponseBody USR008RES02 insertUSR008FUN01(@RequestParam(value = "talentFile", required = false) MultipartFile talentFile, @RequestParam(value = "USR008REQ02") String jsonData,
        @RequestParam(value = "coverImg", required = false) MultipartFile coverImg) {
    USR008RES02 result = null;
    try {
        Gson gson = new GsonBuilder().create();
        USR008REQ02 usr008req02 = gson.fromJson(jsonData, USR008REQ02.class);
        result = usr008SEV.insertUSR008RES02(usr008req02, talentFile, coverImg);
    } catch (SystemException e) {
        logger.error("insertUSR008FUN01 function has been failed.");
        throw new SystemException("insertUSR008FUN01 function has been failed.", e);
    }
    return result;
}

Answer 1

這是我在我的應用程序中實現這一點的方式。

HTML

        <label for="uploadDomainFile">Select File</label>
        <input type="file" class="form-control" id="uploadDomainFile" ng-model="fileDomain" ng-file-select>
        <label for="uploadLegalFile">Select File</label>
        <input type="file" id="uploadLegalFile" ng-model="fileLegal" ng-file-select>

JS

//controller
$scope.createDomain = function () {
            adminService.createDomain($scope.domain, $scope.fileLegal, $scope.fileDomain);
        };
//service
//ommitting irrelevant code
uploadOwlFile(fileLegal, domain.id);
uploadOwlFile(fileDomain, domain.id);

        var uploadOwlFile = function(file, domainId) {
          if (file && !!file.value) {
            $upload.upload({
              url: '/api/space/' + domainId + '/owl',
              data: { fileType: file.fileType },
              file: file.value[0]
            })
            .progress(function(evt){
              console.log('progress: ' + parseInt(100 * evt.loaded / evt.total))
            })
            .success(function(data, status, headers, config){
              console.log('success', 'file: ' + config.file.name + ' successfully uploaded');
              return true;
            })
            .error(function(err, status){
              console.log('failure', err);
              return false;
            })
          } else {
            return true;
          }
        };

返回true或false取決於文件上載的狀態。

因此，我的方法涉及對2個輸入使用兩個ng-model ，並分別上傳文件。