Question

在Angular中，有没有办法听取您自己不做的请求的响应？具体来说，我正在实现向Node.js上传文件，我正在以编程方式提交表单：

HTML：

<form enctype   =  "multipart/form-data"
      action    =  "/blah/fileupload"
      method    =  "post"
          id    =  "upload_file"
>
  <input type="file" onchange="angular.element(this).scope().onFileSelect(event)" name="bulk_uploads" />
</form>

角度控制器：

  $scope.onFileSelect = function(event)
  {
    var form_elem = document.getElementById('upload_file');    
    form_elem.submit();
  }

问题是以这种方式提交表单不会返回承诺，如果我提交表单如下：

$http.post('/blah/fileupload', { files : event.target.files })

然后一旦它到达节点服务器就无法访问上传的文件（例如req.files为空）。

有没有办法通过以我正在进行的程序方式提交表单来监听服务器对'blah / fileupload'的响应，或者我是否以错误的方式进行此操作？

注意：为了提高性能，我希望不要使用Interceptors API。如果没有重大的性能影响，请告诉我！

Answer 1

有两个主要建议： 1）使用一些外部角度文件上传库，例如ng-file-upload 2）从控制器订阅submit事件：

document.getElementById('upload_file').addEventListener('submit', your_handler)

Answer 2

虽然这不是我特定的答案，但我如何创建一个Angular端服务端点？＆＃39;问题，我能够通过在将数据发布到服务器之前读取客户端中的文件内容来解决我遇到的问题：

var fileInput = document.getElementById('upload_file');
fileInput.addEventListener('change', onFileSelect);

function onFileSelect(event)
{
  var fileList = event.target.files;
  for (var i = 0, totalFiles = fileList.length; i < totalFiles; ++i)
  {
    var file = fileList.item(i);
    var fileReader = new FileReader();
    fileReader.addEventListener('load', onFileLoad); 
    fileReader.readAsText(file);
}

var fileData = new Array();
function onFileLoad(event)
{
  fileData.push(event.target.result);

  if (fileData.length == totalFiles)
  {
    sendFilesToServer(fileData);
  }
}


function sendFilesToServer(fileData)
{
  $http.post('/blah/fileupload', { files : fileData })
       .success(function(data, status, headers, config)
         {
          // ...

Angular：如何倾听你自己没有做出的回应？

2 个答案: