使用 angular-file-upload 上传多个文件答案

【问题标题】：Uploading multiple files with angular-file-upload使用 angular-file-upload 上传多个文件
【发布时间】：2015-12-01 14:57:06
【问题描述】：

我正在使用 angular-file-upload 将图像与表单数据一起上传到我的服务器。我已经能够一次成功地完成一张图像。

我的问题是，在我的表单中，我需要上传两张图片，使用单独的输入（以及发送其他表单数据）。我使用单独输入的原因是我的一张图片是缩略图，另一张是英雄图片。我需要能够区分它们并将它们的文件路径插入到我的数据库中它们各自的列中。

我通读了this github issue，其中介绍了如何使用相同的输入上传多个文件，但我找不到任何关于使用不同输入上传多个文件的信息。也许我误解了他们。

现在，如果我尝试选择标题图像，它只会更改缩略图图像的值。

这是我的表格：

 <form>
    ...(other text form inputs above)...
    <div class="form-group">
      <label class="col-sm-2 control-label"> Teaser</label>
      <div class="col-sm-8>
        <input class="form-control" filestyle="" accept=".png,.gif,.jpg,.jpeg" data-button-text="Choose image" type='file' data-classbutton='btn btn-default' data-classinput="form-control inline" nv-file-select='' uploader='uploader' options="{'field': 'thumbnail_url'}"
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label"> Header Image</label>
      <div class="col-sm-8>
        <input class="form-control" filestyle="" accept=".png,.gif,.jpg,.jpeg" data-button-text="Choose image" type='file' data-classbutton='btn btn-default' data-classinput="form-control inline" nv-file-select='' uploader='uploader' options="{'field': 'header_url'}"
      </div>
    </div>

</form>

这是我将文件发送到服务器的方式（在 onCompleteAll 回调中，我将表单数据发送到服务器）：

    $scope.uploader = new FileUploader({
      url: '/laravel/public/admin/events/thumbnail_url/file_upload',
      alias: 'files',
      headers: {
      // 'X-CSRF-Token': n/a
      },
      onBeforeUploadItem: function(item) {
        /* Laravel file name alias */
        item.alias = 'file';
      },
      onSuccessItem: function(fileItem, response, status, headers) {
        $scope.newEventForm[fileItem.field] = '/laravel/public/uploads/events/' + response.filename;
      },
      onCompleteAll: function() {
        /* Now ready to save form data */
       AdminEvent.save($scope.newEventForm).$promise.then(function(response) {
          $scope.events.push(response.data);
          toaster.pop('success', 'Added', 'Event added successfully.');
        });
      }
    });

【问题讨论】：

标签： angularjs angular-file-upload

【解决方案1】：

我在使用 ng-file-upload 时遇到了同样的问题，但我没有使用 angular-file-upload。

所以这个解决方案可能对你有帮助。

在我的应用中，我有用户个人资料图片和背景图片。

我使用 ng-file-upload 的文件选项发送的个人资料图像输入值，但它没有提供其他选项来发送第二个文件输入值。

解决我所做的事情

创建了第二个文件输入，并使用了与我的表属性相同的输入模型，例如 ng-model="user.bg_avatar"，其中 bg_avatar 是我在 rails 中的背景图像属性。

现在您可以在角度控制器中使用用户对象（user.bg_avatar）获取第二个文件输入值，我们将其发送到 rails，当 rails 获取它时将其与其他用户属性一起保存。但是不要忘记允许这个属性。

【讨论】：