4

複数の入力要素から複数のファイルを 1 つのフォームにアップロードしようとしています。

例えば ​​：

 <form id="category-form" method="post" enctype="multipart/form-data" class="form" name="form">

                <div class="form-group">
                  <p>Pictures of the A Category</p>
                  <input id="a_pics" accept="image/*" type="file" class="file" multiple="true" my-file-upload="a_pics" required/>
                </div>

                <div class="form-group">
                  <p>Pictures of the B Category</p>
                  <input id="b_pics" accept="image/*" type="file" class="file" multiple="true" my-file-upload="b_pics" required/>
                </div>    
 </form>

ファイルをアップロードするサービスがあります。これで、どの入力要素から来ているかがわかります。

.service('fileService', function () {
    var file = {};
    var fileService = {};

    fileService.getFile = function (name) {
        return file[name];
    };

    fileService.setFile = function (newFile, index, name) {
        if (index === 0 && file[name] === undefined)
          file[name] = [];
        file[name][index] = newFile;
    };

    return fileService;
})

.directive('myFileUpload', function (fileService) {
    return function (scope, element, attrs) {
        element.bind('change', function () {
            var index;
            var index_file = 0;
            for (index = 0; index < element[0].files.length; index++) {
              fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
              index_file++;
            }
            index_file = 0;
        });
    }
});

そこまでは、すべてうまくいきます。カテゴリ/ファイルのマップを取得しました。しかし、これをサーバーにアップロードするときは、次のことを行う必要があります。

        var a_pics = fileService.getFile($scope.a_pics);
        var b_pics = fileService.getFile($scope.b_pics);

        var option = {
            transformRequest: angular.identity,
            headers: {'Content-Type': plan_pics.type}
        };

        var fd = new FormData();
        var index;

        for (index = 0; index < a_pics.length; index++) 
          fd.append('file', a_pics[index]);
        for (index = 0; index < b_pics.length; index++)
          fd.append('file', b_pics[index]);

        $http.post('/api/projects', fd, option);

そのため、サーバーはこれを受信すると、ファイルのカテゴリを知ることができません。私はこれを得た：

 [{ fieldname: 'file',
    originalname: 'a_cat.png',
    name: 'f771ac79f61dbdbf6fe689f593939ac5.png',
    encoding: '7bit',
    mimetype: 'image/png',
    path: 'client/assets/images/f771ac79f61dbdbf6fe689f593939ac5.png',
    extension: 'png',
    size: 8185,
    truncated: false,
    buffer: null },
  { fieldname: 'file',
    originalname: 'a_cat (1).png',
    name: '830dc77921461b10fecf35004fc00724.png',
    encoding: '7bit',
    mimetype: 'image/png',
    path: 'client/assets/images/830dc77921461b10fecf35004fc00724.png',
    extension: 'png',
    size: 12192,
    truncated: false,
    buffer: null },
  { fieldname: 'file',
    originalname: 'b_cat_8.jpg',
    name: '39f3bd6a7204ac5fdf114a870ece9f50.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    path: 'client/assets/images/39f3bd6a7204ac5fdf114a870ece9f50.jpg',
    extension: 'jpg',
    size: 98143,
    truncated: false,
    buffer: null }]

File オブジェクトにフィールドを追加しようとしました。うまくいきません。何か提案はありますか？Angular、Express、Multer、および Node を使用しています。

4

1 に答える 1

2

ファイル フィールドは、カテゴリごとに異なるものを呼び出す必要があります。たとえば、次のようになります。

    var a_pics = fileService.getFile($scope.a_pics);
    var b_pics = fileService.getFile($scope.b_pics);

    var option = {
        transformRequest: angular.identity,
        headers: {'Content-Type': plan_pics.type}
    };

    var fd = new FormData();
    var index;

    for (index = 0; index < a_pics.length; index++) 
      fd.append('files_a', a_pics[index]);
    for (index = 0; index < b_pics.length; index++)
      fd.append('files_b', b_pics[index]);

    $http.post('/api/projects', fd, option);

次に、送信されたデータで 2 つの異なるフィールド名を取得し、サーバー コードで適切に処理できます。

于 2015-05-29T17:25:09.863 に答える