如何使用多个文件input元素上传文件?

我试图从一个窗体中的多个input元素上传多个文件。

举个例子 :

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

我有一个file upload的服务。 有了这个,我可以知道它来自哪个input元素。

 .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对象中添加一个字段。 它不起作用。 你有什么build议吗? 我正在使用Angular,Express,Multer和Node。

您需要针对不同的类别调用不同的文件字段,例如:

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

然后,您将在提交的数据中获得两个不同的字段名称,并可以在您的服务器代码中正确处理。