如何使用角色中的POST上传文件?

时间:2017-07-18 21:11:34

标签: javascript java angularjs file-upload http-post

如何传输pdf文件?我已经在网上找到了多种方式,但大多数都涉及到我们当前系统的工作方式的改造,这远非理想。

我对角度不太熟悉,但我正在尝试将文件上传到服务器。我正在使用现有的架构,所以问题并不像从头开始重写那么容易。 Spring抱怨"当前请求不是多部分请求",如果我尝试将其作为多部分文件发送,但我不知道如何制作它。文件类型必须是Blob类型。目前,不会抛出任何错误,但在传输数据块后data.content为空。

以下是我目前的情况:

$scope.uploadPDF = function(uploadedPDF) {
    var url = 'uploadPDF';
    data = {};
    data.comments = $scope.worksheet.comments;
    data.queryId = $scope.qId;
    data.responseId = $scope.responseId;
    data.requestTS = new Date().getTime();
    data.content = uploadedPDF;
    $http.post(url, data);
};

和调用它的函数是这样,它拉入文件,生成一个名称并添加名称作为要处理的属性serveride,做一些非附属逻辑,然后调用上面的函数进行传输:

$scope.addPDF = function() {

 var pdfUploads = document.getElementById('file');
  if ('files' in pdfUploads)
  {
    if (pdfUploads.files.length == 0)
    {
        $scope.setReasonForChange("addPDF");
    }else
    {
        for (var i = 0; i < pdfUploads.files.length; i++)
        {
           var currentTimeZone = new Date().toLocaleTimeString('en-us',{timeZoneName:'short'}).split(' ')[2];
           $scope.militaryTime = $filter('date')(Date.now(), "MM-dd-yyyy_HHmm");
           pdfUploads.files[i].generatedFileName = "QID-" + $scope.queryId + "_" + $scope.worksheet.response.PDF_DESCRIPTION + "_" + $scope.militaryTime + currentTimeZone + ".PDF";
        }
    }
} 

    var pdfComment = document.getElementById("pdfComment").value;
    if (!pdfComment)
    {
        $scope.setReasonForChange("updatePDF");

    } else
    {
        var blobPDF = new Blob([pdfUploads.files[0]], {type: 'application/pdf'});
        $scope.uploadPDF(blobPDF);
    }
}

HTML是:

<form name="UploadForm" id="UploadForm" class="details" form-on-change="formChanged()" enctype="multipart/form-data">
            <input type="file" multiple size="50" id="file" name="file" ng-disabled="is_readonly"/>
            <button ng-click="addPDF()" ng-disabled="is_readonly">Add</button>
</form>

最后,服务器端是这样的,我认为数据是linkedhashmap的一部分,其中值来自服务器并处理:

@ResponseBody
@RequestMapping(value = "/uploadPDF", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseAttachment uploadPDF(@RequestBody Data data, HttpServletRequest request) throws Exception {
    User user = (user) request.getSession(false).getAttribute(FieldConstants.USER_SESSION_ATTR);
    ResponseAttachment newPDF = responseAttachmentService.addAttachment(data, user.getUserId());

    return newPDF;

目前,它发送和接收数据,但文件应该是空的地方除外。

我尝试过ng-fileupload,但是将它附加到我们的产品是一场噩梦,特别是考虑到它的使用有点需要用户已经知道如何使用角度,因为它几乎没有文档...我们没有棱角分明的人

1 个答案:

答案 0 :(得分:1)

This question may help you.

基本上你不能以纯JSON格式发送文件。您必须使用多部分表单并以此方式发布。例如:

postFile(file) {
    var postData = new FormData();
    postData.append('File', file);

    var params = {
    headers: {
        "Content-Type": undefined
    }

    $http.post(url, data, params).then([...]);
}

您需要额外的Content-Type参数才能正确发送。