angularjs – 如何使用多个文件输入元素上传文件？

2023年3月5日 180次阅读

我正在尝试以一种形式从多个输入元素上传多个文件.

举个例子 ：

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

最佳答案 您需要为不同的类别调用文件字段不同的东西,例如：

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

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

点赞