以角度处理文件提交 API 响应

Question

我有一个表单，用户在其中将文件上传到我的节点服务器，执行一些操作，然后发送JSON响应。

我不是通过控件进行 POST，而是通过提交表单。在我的节点代码完成一些操作后，它会成功发送此响应。

                  res.json({ 
                    results: "TRUE",
                    file: rows,
                    column: pIndex,
                    rowCount: rows.length 
                  })

问题，我需要在我的角度应用程序中访问此 json 响应。用户提交表单后，他们会看到此响应的原始 json，并且应用将重定向到我的终结点：http://localhost:8000/upload-file

我该怎么做才能在我的 angular 应用程序中访问此响应，而无需通过控制器 （$http.post 上传文件

我不知道，我对javascript很陌生。谢谢！

Answer 1

使用 AngularJS 上传文件

模板

<input type=file files-input ng-model="files" /><br>
<button ng-disabled="!files[0]" ng-click="upload()">Upload</button><br>

选择文件后，"上载"按钮将变为活动状态。

files-input指令

app.directive("filesInput", function() {
  return {
      require: "ngModel",
      link: function linkFn (scope, elem, attrs, ngModel) {
         elem.on("change", function (e) {
             ngModel.$setViewValue(elem[0].files);
         });
      }
  };
});

该指令使用 ngModelController API 将所选文件绑定到范围变量。

upload()功能

var vm = $scope;
var url = "API URL";
var config = { headers: {"Content-Type": undefined} };
vm.upload = function() {
    //USE formData for Content-Type multipart/formdata        
    //var formData = new $window.FormData();
    //formData.append("file-0", vm.files[0]);
    //USE files[0] for binary upload
    $http.post(url, vm.files[0], config)
     .then(function(response) {
        vm.result = "SUCCESS";
        vm.data = response.data.data;
    }).catch(function(response) {
        vm.result = "ERROR "+response.status;
    });
};

设置Content-Type: undefined非常重要，以便 AngularJS 框架不会将内容类型设置为 application/json 。然后，XHR send 方法将根据给定对象的类型设置内容类型。

直接发送文件更有效，但如果需要使用 base64 编码的内容类型multipart/formdata，请使用 formData API 创建要发送的 XHR API 的formData对象。

PLNKR上的演示。

Answer 2

这是因为您没有使用 Angular 控制器。默认情况下，常规 HTML 表单将尝试向 action="" 属性中定义的 URL 发出编码的 URL 参数 POST 请求，或者，如果未定义，它将 POST 到当前 URL。然后，帖子的结果被简单地吐到浏览器窗口中。

Angular 有一个指令ngSubmit用于拦截此默认行为，以便您可以在控制器中处理它：

<form ng-submit="mySubmitHandler()">
...
  <input type="text" ng-model="formData.myField"/>
</form>

在您的 Angular 控制器中，您现在可以做任何您想做的事情。通常，您使用$http提供程序发出 POST 请求：

function myController($scope) {
  $scope.formData = {
    myField: '',
  };
  $scope.mySubmitHandler = function () {
    $http.post('/someUrl', formData).then(function(response) {
      //handle the response from Node.js
    });
  };
}

这样做的问题是您正在尝试上传文件。尝试上传带有$http的文件可能令人生畏。最好的办法是使用第三方库来促进角度文件上传，例如 ng-file-upload .它将带有它自己的一组指令，允许您在Angular内部处理Node响应。