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

Question

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

Для Exemple:

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

Answer 1

Вам необходимо вызвать файл полей разные вещи для разных категорий, например:

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); 

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