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

Question

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

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

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

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

如何在我的 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 method 将根据给定对象的类型设置内容类型。

直接发送文件效率更高，但如果需要内容类型为multipart/formdata 和base64 encoding，请使用formData API 创建一个formData 对象以供XHR API 发送。

DEMO on 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 上传文件可能会令人生畏。最好的办法是使用 3rd 方库来促进 Angular 文件上传，例如 ng-file-upload。它会附带一套自己的指令，允许您在 Angular 中处理节点响应。