Angularjs如何上传多部分表单数据和文件？

Question

我是angular.js的初学者,但我对基础知识有很好的把握.

我要做的是上传文件和一些表单数据作为多部分表单数据.我读到这不是角度的功能,但是第三方库可以完成这项工作.我通过git克隆了angular-file-upload,但是我仍然无法发布一个简单的表单和文件.

有人可以提供一个例子,html和js如何做到这一点？

Answer 1

首先

1. 您不需要对结构进行任何特殊更改.我的意思是:html输入标签.

<input accept="image/*" name="file" ng-value="fileToUpload"
       value="{{fileToUpload}}" file-model="fileToUpload"
       set-file-data="fileToUpload = value;" 
       type="file" id="my_file" />

1.2创建自己的指令,

.directive("fileModel",function() {
	return {
		restrict: 'EA',
		scope: {
			setFileData: "&"
		},
		link: function(scope, ele, attrs) {
			ele.on('change', function() {
				scope.$apply(function() {
					var val = ele[0].files[0];
					scope.setFileData({ value: val });
				});
			});
		}
	}
})

2. 在带有$ httpProvider的模块中,使用multipart/form-data添加依赖项(Accept,Content-Type等).(建议是,接受json格式的响应)例如:

$ httpProvider.defaults.headers.post ['Accept'] ='application/json,text/javascript'; $ httpProvider.defaults.headers.post ['Content-Type'] ='multipart/form-data; 字符集= UTF-8' ;

3. 然后在控制器中创建单独的函数来处理表单提交调用.比如以下代码:

4. 在服务函数句柄"responseType"param故意,以便服务器不应抛出"byteerror".

5. transformRequest,用于修改附加标识的请求格式.

6. withCredentials:false,用于HTTP身份验证信息.

in controller:

  // code this accordingly, so that your file object 
  // will be picked up in service call below.
  fileUpload.uploadFileToUrl(file); 


in service:

  .service('fileUpload', ['$http', 'ajaxService',
    function($http, ajaxService) {

      this.uploadFileToUrl = function(data) {
        var data = {}; //file object 

        var fd = new FormData();
        fd.append('file', data.file);

        $http.post("endpoint server path to whom sending file", fd, {
            withCredentials: false,
            headers: {
              'Content-Type': undefined
            },
            transformRequest: angular.identity,
            params: {
              fd
            },
            responseType: "arraybuffer"
          })
          .then(function(response) {
            var data = response.data;
            var status = response.status;
            console.log(data);

            if (status == 200 || status == 202) //do whatever in success
            else // handle error in  else if needed 
          })
          .catch(function(error) {
            console.log(error.status);

            // handle else calls
          });
      }
    }
  }])

<script src="//unpkg.com/angular/angular.js"></script>

Answer 2

这非常必须只是该项目演示页面的副本,并显示在表单提交上传单个文件并上传进度.

(function (angular) {
'use strict';

angular.module('uploadModule', [])
    .controller('uploadCtrl', [
        '$scope',
        '$upload',
        function ($scope, $upload) {
            $scope.model = {};
            $scope.selectedFile = [];
            $scope.uploadProgress = 0;

            $scope.uploadFile = function () {
                var file = $scope.selectedFile[0];
                $scope.upload = $upload.upload({
                    url: 'api/upload',
                    method: 'POST',
                    data: angular.toJson($scope.model),
                    file: file
                }).progress(function (evt) {
                    $scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total, 10);
                }).success(function (data) {
                    //do something
                });
            };

            $scope.onFileSelect = function ($files) {
                $scope.uploadProgress = 0;
                $scope.selectedFile = $files;
            };
        }
    ])
    .directive('progressBar', [
        function () {
            return {
                link: function ($scope, el, attrs) {
                    $scope.$watch(attrs.progressBar, function (newValue) {
                        el.css('width', newValue.toString() + '%');
                    });
                }
            };
        }
    ]);
 }(angular));

HTML

<form ng-submit="uploadFile()">
   <div class="row">
         <div class="col-md-12">
                  <input type="text" ng-model="model.fileDescription" />
                  <input type="number" ng-model="model.rating" />
                  <input type="checkbox" ng-model="model.isAGoodFile" />
                  <input type="file" ng-file-select="onFileSelect($files)">
                  <div class="progress" style="margin-top: 20px;">
                    <div class="progress-bar" progress-bar="uploadProgress" role="progressbar">
                      <span ng-bind="uploadProgress"></span>
                      <span>%</span>
                    </div>
                  </div>

                  <button button type="submit" class="btn btn-default btn-lg">
                    <i class="fa fa-cloud-upload"></i>
                    &nbsp;
                    <span>Upload File</span>
                  </button>
                </div>
              </div>
            </form>

编辑:添加了将模型传递到文件发布中的服务器.

输入元素中的表单数据将在帖子的data属性中发送,并可作为普通表单值使用.