更新

Question

我正在尝试将表单数据和图像从HTML页面绑定到 Angular Controller ，然后使用图像数据附加表单数据，最后将数据POST到API。

所以我搜索了一下，并且知道了，遗憾的是AngularJs没有任何图像文件的指令。
所以我得到的最终解决方案是创建一个自定义指令，用图像附加表单数据，然后将该数据发送到服务器。

我尝试了什么：

的 HTML

<form role="form" enctype="multipart/form-data" name="myForm">
<input type="text"  ng-model="UserName" required="required">
<input type="text"  ng-model="FirstName" required="required">
<input type="file"  ng-model="Image" required="required">
<button type="submit" ng-click="product()">save</button>
</form>

自定义指令：

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

POST方式：

scope.product = function() {
     var pro = $scope.pro;
     console.log('Form Data : ' + pro);
    var fd = new FormData();
    angular.forEach($scope.Image, function(file) {
        fd.append('file', file);
    });
    fd.append('pro', JSON.stringify($scope.product));
    $http.post('/products/createProduct', fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-type': undefined
            }
        })
        .then(function(data) {
            $scope.ListProducts = data;
            console.log($scope.ListProducts );
        });

}

但问题是，没有任何东西绑定到控制器，并且每次我的对象都是空的。
我甚至尝试将数据记录到控制台，但内部数据没有任何内容我不知道自己做错了什么。
请帮忙..

更新

我能够绑定数据，但在将图像路径与其他表单数据一起发布时，我将全部归零。

angular.js：14642可能未处理的拒绝：{＆＃34;数据＆＃34;：null，＆＃34;状态＆＃34;： - 1，＆＃34; config＆＃34;：{＆＃34;方法＆＃34;：＆＃34; POST＆＃34;＆＃34; transfor mRequest＆＃34;：[空]，＆＃34; TR ansformResponse＆＃34;：NU 11]，＆＃34; jsonpCallbackPa RAM＆＃34;：＆＃34;回调＆＃34;＆＃34; URL＆＃34;：＆＃34; /产品/ createP RODUCT＆＃34;＆＃34;数据＆＃34 ;: {＆＃34;亲ductStock＆＃34;：[{＆＃34;价格＆＃34;：＆＃34;＆＃34;＆＃34;颜色＆＃34;：＆＃34;＆＃34 ;}]，＆＃34; PR oductThumbnail＆＃34; {＆＃34; 0＆＃34;：{}}}＆＃34;头＆＃34; {＆＃34; AC CEPT＆＃ 34;：＆＃34; application / j son，text / plain，/＆＃34;，＆＃34; Content-Type＆＃34;：＆＃34; application / json; charset = utf-8＆＃34; }}，＆＃34; status Text＆＃34;：＆＃34;＆＃34;}错误

Answer 1

默认情况下，<input type=file>元素不会与ng-model directive一起使用。它需要custom directive：

使用`ng-model`

的“文件输入”指令的工作演示

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

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileArray" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileArray">
      {{file.name}}
    </div>
  </body>

谢谢你的回答。我尝试了你的代码，并获得了：

angular.js：14642可能未处理的拒绝：{“data”：null，“status”： - 1，“config”：{“method”：“POST”，“transfor mRequest”：[null]，“ TR ansformResponse “：[NU 11]，” jsonpCallbackPa RAM “：” 回调 “ ”URL “：”/产品/ createP RODUCT“， ”数据“：{ ”亲ductStock“：[{” 价格“：” “ ”色彩“： ”“}]， ”PR oductThumbnail“：{ ”0“：{}}}， ”报头“：{ ”AC CEPT“：” 应用/ J son，text / plain，/“，”Content-Type“：”application / json; charset = utf-8“}}，”status Text“：”“} error

根据我的经验，-1状态的最常见原因是浏览器因违反Same Origin Policy.

而阻止了响应

出于安全原因，浏览器会限制从脚本中发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch遵循same-origin policy。因此，使用XMLHttpRequest或Fetch 的网络应用程序只能向自己的域发出HTTP请求。为了改进Web应用程序，开发人员要求浏览器供应商允许跨域请求。

跨域资源共享（CORS）机制为Web服务器提供跨域访问控制，从而实现安全的跨域数据传输。现代浏览器在API容器中使用CORS（例如XMLHttpRequest或Fetch）来降低跨源HTTP请求的风险。

请参阅Use CORS to allow cross-origin access.

Answer 2

我改进了你的代码。基本上你使用的是ng-model，而不是像你的指令所说的文件模型，fd.append文件如果只有一个文件则不需要迭代。检查代码和plnkr。

<强> CONTROLLER

$scope.product = function() {
     var pro = $scope.pro;
     var fd = new FormData();

    fd.append('file', $scope.form.Image);
    fd.append('pro', JSON.stringify($scope.form));
    $http.post('/products/createProduct', fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-type': undefined
            }
        })
        .then(function(data) {
            $scope.ListProducts = data;
            console.log($scope.ListProducts );
        });
  };

HTML

<form role="form" enctype="multipart/form-data" name="myForm">
    <input type="text"  ng-model="form.UserName" required="required">
    <input type="text"  ng-model="form.FirstName" required="required">
    <input type="file" file-model="form.Image" required="required">
    <button type="submit" ng-click="product()">save</button>
</form>

{{form.Image.name}}

PLNKR EXAMPLE

**更新**

网络中的

可以看到这一点。发送数据时

将表单数据与HTML页面中的图像绑定到Angular Controller

更新

2 个答案:

使用`ng-model`

将表单数据与HTML页面中的图像绑定到Angular Controller

更新

2 个答案:

使用ng-model

使用`ng-model`