javascript - 如何使用 Angular 中的 POST 上传文件？

Question

如何传输 pdf 文件？我在网上找到了多种方法，但大多数都涉及到对我们当前系统工作方式的重新设计，这远非理想。

我对 Angular 不太熟悉，但我正在尝试将文件上传到服务器。我正在使用现有的架构，因此问题并不像简单地从头开始重写那么简单。如果我尝试将其作为多部分文件发送，但我不知道如何将其变成一个，Spring 会提示“当前请求不是多部分请求”。文件类型必须是 Blob 类型。目前没有报错，但是数据 block 传输后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);
};

调用它的函数是这个，它拉入文件，生成一个名称并将该名称添加为要在服务器端处理的属性，执行一些无关的逻辑，然后调用上面的函数进行传输:

$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，但将其附加到我们的产品是一场噩梦，特别是考虑到它的使用有点要求用户已经知道如何使用 Angular，因为它几乎没有文档......而且我们没有 Angular 人员.

Answer 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 参数才能正确发送。