Question

我正在尝试使用multer上传多个文件。我有三个输入框和一个上传按钮，可以同时上传三个文件根据客户要求，用户需要一次选择一个文件，选择三个文件后，用户可以一次性上传所有文件。

HTML

sr2.Close(); sr.Close();

Server.js

<div ng-show="role == '1'"  class="col-sm-4 col-md-4 form-group">
    <label for="basic-url">Upload Your Image (Passport Size)</label>
    <input type="file" class="form-control"  file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(this.files)"></label>
    <input type="submit" class="btn btn-primary"  ng-click="Submit('customerimage')" value="Upload" >
</div>
<div ng-show="role == '1'"  class="col-sm-4 col-md-4 form-group">                       
    <label for="basic-url">Upload Pan Card image</label>
    <input type="file" class="form-control"  file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(this.files)"></label>
    <input type="submit" class="btn btn-primary"  ng-click="Submit('pancardimage')" value="Upload" >
</div>
<div ng-show="role == '1'"  class="col-sm-4 col-md-4 form-group">                   
    <label for="basic-url">Upload Bank Passbook image</label>
    <input type="file" class="form-control"   file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(thi`enter code here`s.files)"></label>
    <input type="submit" class="btn btn-primary"  ng-click="Submit('bankimage')" value="Upload" >
</div>

控制器

var multer=require('multer');
var storage = multer.diskStorage({
          destination: function (req, file, cb) {
            cb(null, 'public/uploads/images/');
          },
          filename: function (req, file, cb) {
              if(! file.originalname.match(/\.(jpeg|jpg|png|JPEG|JPG|PNG)$/)){

                  var err=new Error();
                  err.code="filetype";
                  return cb(err);
              }else{
                  cb(null,Date.now() + '_' + file.originalname);
              }

            //cb(null, file.fieldname + '-' + Date.now());
          }
    });
var upload = multer({ storage: storage }).single('myFile');
app.post('/upload', function (req, res) {
      upload(req, res, function (err) {
              console.log(req.file);

         if (err) {
            if(err.code=='LIMIT_FILE_SIZE'){
                res.json({success:false,message:'file is tool arge'});
            }else if(err.code=='filetype'){
                res.json({success:false,message:'file type is invalid'});
            }else{

                res.json({success:false,message:'file is not selected'});
            }
        }
      else{
          if(!req.file){
              res.json({success:false,message:'no file selected'});
          }
          else{
          console.log(req.file);
               res.json({success:true,message: req.file});
          }
        }

        // Everything went fine
      });
    });

指令

$scope.file={};
    $scope.Submit=function(name){
        $scope.name = name;
        uploadFile.upload($scope.file).then(function(data){
            if(data.data.success){
                $scope.alert='alert alert-success';
                $scope.message=data.data.message;
                $scope.file={};
                $scope.newCustomer[$scope.name] = 'uploads/images/' + data.data.message.filename;
            }else{
                $scope.alert='alert alert-danger';
                $scope.message=data.data.message;
                $scope.file={};
            }
        });
    };

    $scope.photoChanged=function(files){
     if(files.length >0 && files[0].name.match(/\.(jpeg|jpg|png)$/)){
         var file=files[0];
         var fileReader=new FileReader();
            fileReader.readAsDataURL(file);
         fileReader.onload=function(e){
             $timeout(function(){
                     $scope.thumbnail={};
                         $scope.thumbnail.dataUrl=e.target.result;
             });
         }
     }
     else{
         $scope.thumbnail={};
         $scope.message=false;
     }
 };

服务

app.directive("fileModel",['$parse',function($parse){
      return{
              restrict:"A",
              link:function(scope,element,attrs){
                  var parsedFile=$parse(attrs.fileModel);
                  var parsedFileSetter=parsedFile.assign;

                  element.bind('change',function(){
                      scope.$apply(function(){
                            parsedFileSetter(scope,element[0].files[0]);

                      });
                  });
              }
      };

}]);

Answer 1

您应该将每个输入字段附加到表单，然后再将其传递给中间件。

我看到你的所有3个输入使用相同的文件模型，我不确定这是创建一个数组还是相互覆盖。但你可以试试以下

在数组的情况下尝试这个：

service.uploadFile = function(file){
    var fd = new FormData();
    for(var i = 0; i < file.upload.length; i++){
        fd.append('myFile', file.upload[i]);
    }
    return $http.post('/upload',fd,{
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    });
}

如果他们互相覆盖，请尝试：

service.uploadFile = function(file){
    var fd = new FormData();

    fd.append('image1', file.upload1);
    fd.append('image2', file.upload2);
    fd.append('image3', file.upload3);

    return $http.post('/upload',fd,{
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    });
}

使用node，multer，express上传多个文件

1 个答案: