Загружать файл асинхронно с помощью Angular, ng-file-upload с использованием RESTful API

У меня есть форма, и несколько полей этой формы являются загрузкой файлов. Вот что у меня есть:

  1. Пользователь заполняет форму вверх
  2. Пользователь выбирает файлы для отправки
  3. Пользователь нажимает отправить

Теперь вот что я хочу сделать:

  1. Отправьте форму на сервер, вернув идентификатор
  2. Отправить файл один на сервер myresource/ID/fileone
  3. Отправить второй файл на сервер myresource/ID/filetwo ...

¿Как я могу выполнить загрузку этих файлов программно? (Я использую угловые промисы, так что проблем с последовательными запросами нет...)

Вот мой код:

$scope.upload = function (files, url) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          Upload.upload({
            url: url,
            //fields: {'username': $scope.username},
            file: file
          }).progress(function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
          }).success(function (data, status, headers, config) {
            console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
          });
        }
      }
    };

Мой HTML:

<input type="file" class="btn btn-danger" ng-file-select ng-model="files" ng-multiple="multiple"> Doit!

<input class="btn btn-danger" ng-file-select ng-model="files" ng-multiple="multiple">Doit too!

javascript php angularjs ng-file-upload
person danielrvt    schedule 04.05.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Итак, я наконец получил это.

Я сделал это:

  1. Выберите файл и сохраните файл в ng-модели
  2. Проверить некоторые вещи
  3. Отправьте основную модель (той, которой принадлежат файлы, которые я хочу загрузить)
  4. Загрузите файл в конечные точки /api/myentity/{id}/resumee, /api/myentity/{id}/dni и /api/myentity/{id}/picture. Где {id} — это идентификатор объекта, который я только что создал на предыдущем шаге.

Таким образом, хитрость здесь заключается в выполнении двух запросов: один для создания объекта и получения идентификатора, второй — для загрузки файла.

Код выглядит так:

// This is called every time the user selects a file
$scope.selectedFile = function (files, doc) {
      if (doc === 'resumee') $scope.documents.resumee = files.pop();
      else if (doc === 'dni') $scope.documents.dni = files.pop();
      else if (doc === 'picture') $scope.documents.picture = files.pop();
};

// This is called when the user submits the form
$scope.upload = function (docname, url) {

      var file = $scope.stepThree.documents[docname];

      return Upload.upload({
        url: url,
        method: 'POST',
        headers: {'Content-Type': file.type},
        fileFormDataName: docname,
        data: file,
        file: file
      }).progress(function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
      });
    };

И, наконец, разметка такая:

<div class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-2">
            <label> Resumen Curricular </label>
          </div>
          <div class="col-sm-2">
            <button class="btn btn-danger" ngf-select ngf-change="selectFile($files, 'resumee')"> Seleccione</button>
            <p>{{stepThree.documents.resumee.name}}</p>
          </div>
        </div>
 </div>

Поскольку никто не прокомментировал этот подход/метод, я буду считать это лучшим в мире способом работы с загрузкой файлов, angular и REST API.

person danielrvt    schedule 11.05.2015