Angularjs как загрузить данные многостраничной формы и файл?

Я новичок в угловой.js, но я хорошо понимаю основы.

то, что я хочу сделать, это загрузить файл и некоторые данные формы в виде данных многострочной формы. Я читал, что это не особенность angular, однако сторонние библиотеки могут это сделать. Я клонировал angular-file-upload через git, однако я все еще не могу опубликовать простую форму и файл.

может кто-нибудь привести пример, html и js о том, как это сделать?

3 ответов


в первую очередь

  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 });
				});
			});
		}
	}
})
  1. в модуле с $httpProvider добавьте зависимость как (Accept, Content-Type etc) с multipart/form-data. (Предложение было бы, принять ответ в формате json) Для Эл.г:

$ httpProvider.по умолчанию.заголовки.post ['Accept'] = 'application/ json, text / javascript'; $ httpProvider.по умолчанию.заголовки.post ['Content-Type'] = 'multipart / form-data; charset=utf-8';

  1. затем создайте отдельную функцию в контроллере для обработки вызова отправки формы. например, для e.g ниже кода:

  2. в функции обслуживания обрабатывать" responseType " param намеренно, чтобы сервер не должен бросать "byteerror".

  3. transformRequest, чтобы изменить формат запроса с прикрепленным идентификатором.

  4. 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>

это довольно просто копия этой демо-страницы проектов и показывает загрузку одного файла в форме отправки с ходом загрузки.

(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>

EDIT: добавлена передача модели на сервер в сообщении файла.

данные формы во входных элементах будут отправлены в свойстве данных post и будут доступны как обычные значения формы.


более эффективно отправлять файлы напрямую.

на кодировка base64 of Content-Type: multipart/form-data добавляет дополнительные 33% накладных расходов. Если сервер поддерживает его, это более эффективно отправлять файлы напрямую:

Делаешь Несколько $http.post запрос от список

$scope.upload = function(url, fileList) {
    var config = {
      headers: { 'Content-Type': undefined },
      transformResponse: angular.identity
    };
    var promises = fileList.map(function(file) {
      return $http.post(url, file, config);
    });
    return $q.all(promises);
};

при отправке сообщения с важно установить 'Content-Type': undefined. The XHR-запрос отправить метод обнаруживает и автоматически установить тип содержимого.


рабочая демонстрация директивы" select-ng-files", которая работает с ng-model1

на <input type=file> элемент по умолчанию не работает с ng-model directive. Ему нужен пользовательские директивы:

angular.module("app",[]);

angular.module("app").directive("selectNgFiles", 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" select-ng-files ng-model="fileList" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>