使用 Angular 异步上传文件，ng-file-upload 使用 RESTful API

Question

我有一个表单，其中一些表单字段是文件上传。这是我的：

用户填写表格
用户选择要提交的文件
用户按下提交

现在，这就是我想要做的：

Post 表单到服务器，取回一个 ID
Post 文件一到服务器 myresource/ID/fileone
Post 文件二到服务器myresource/ID/filetwo ...

¿如何以编程方式执行此文件上传？（我正在使用 angular promises，所以顺序请求没有问题...）

这是我的代码：

$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!

Answer 1

好的，我终于明白了。

我这样做了：

Select 文件并在 ng-model 中存储文件
验证一些东西
提交主模型（拥有我要上传文件的模型）
将文件上传到端点 /api/myentity/{id}/resumee、/api/myentity/{id}/dni 和 /api/myentity/{id}/picture。其中 {id} 是我在上一步中刚刚创建的实体的 ID。

所以这里的技巧是执行两个请求，一个创建实体并检索 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>

由于没有人对此发表评论 approach/technique，我将把它作为世界上处理文件上传、angular 和 REST API 的最佳方式。

使用 Angular 异步上传文件，ng-file-upload 使用 RESTful API

Upload file asynchronously with Angular, ng-file-upload using a RESTful API

javascript

php

angularjs

ng-file-upload