如何在角度上使用POST上传文件？

如何传输pdf文件？我在网上找到了多种方法，但其中大多数都涉及对我们当前系统如何工作的返工，这远非理想。如何在角度上使用POST上传文件？

我不太熟悉角度，但我试图上传一个文件到服务器。我正在使用现有的架构，所以问题不像从头开始重写一样简单。 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); 
};

，并调用它是这样的，它拉的文件中，生成一个名字，并添加名称作为一个属性来处理服务器端的功能，做了一些无关联的逻辑，然后调用用于传输的上述功能：

$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>

最后，服务器端是这样的，其中i认为数据是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，因为它没有文档......并且我们没有角度人。

来源

2017-07-18 paladin law

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 PARAM使其正确发送。

来源

2017-07-18 21:48:04 mintychai

谢谢！我认为这是我需要的！ –

如何在角度上使用POST上传文件？

回答

相关问题