在Angular节点multer中上传多个文件

Question

我在上传角，节点，multer中上传多个文件时面临问题。数组中的最后一个文件已上传到服务器。

这是我的html。

<div class="mb-1">
    <p class="text-muted m-0">Anti Black List</p>
    <input type="file"  (change)="fileChangeEvent($event)" name="Anti Black List" id="4" #fileDataAntiBlackList (onFileSelected)="onFileSelected($event ,fileDataAntiBlackList)" ng2FileSelect [uploader]="uploader"  accept="application/pdf"/>  
  </div>
<div class="mb-1">
    <p class="text-muted m-0">Anti Black List</p>
    <input type="file"  (change)="fileChangeEvent($event)" name="Shop Act" id="3" #fileDataShopAct (onFileSelected)="onFileSelected($event ,fileDataShopAct)" ng2FileSelect [uploader]="uploader"  accept="application/pdf"/>  
  </div>
<div class="mb-1">
    <p class="text-muted m-0">Anti Black List</p>
    <input type="file"  (change)="fileChangeEvent($event)" name="Professional Tax" id="2"  #fileDataPRO (onFileSelected)="onFileSelected($event ,fileDataPRO)" ng2FileSelect [uploader]="uploader"  accept="application/pdf"/>  
  </div>
<div class="mb-1">
    <p class="text-muted m-0">Anti Black List</p>
    <input type="file"  (change)="fileChangeEvent($event)" name="GST Copy" id="1" #fileDataGST (onFileSelected)="onFileSelected($event ,fileDataGST)" ng2FileSelect [uploader]="uploader"  accept="application/pdf"/>  
  </div>
<mat-label>First name</mat-label>
    <input formControlName="f_name" matInput type="text" name="first_name" placeholder="First name"  required/>
<mat-label>Last name</mat-label>
    <input formControlName="l_name" matInput type="text" name="Last_name" placeholder="Last name" required/>
<button mat-raised-button color="primary" class="mx-4" (click)="onSubmit()"
        [disabled]="uploader.getNotUploadedItems().length && signupForm.invalid">Upload And Save </button>

还有更多的字段，但我在这里显示的较少。

以下是TS文件代码

filesToUpload: Array<File> = [];
fileChangeEvent(fileInput: any) {
this.filesToUpload = <Array<File>>fileInput.target.files;
//this.product.photo = fileInput.target.files[0]['name'];
}
onSubmit() {
//let files = this.getFiles();
let dbId: number;
let formData = new FormData();
const files: Array<File> = this.filesToUpload;
for(let i = 0; i < files.length;i++){
  formData.append("files", files[i], files[i]['name']);
}
formData.append('first_name',this.signupForm.value.f_name);
 this.http.post('http://localhost:3000/api/newUpload', formData)
    .map(files => files)
    .subscribe(files => console.log('files', files));
    return false;
}

这是我的后端API上传

let user_storage = multer.diskStorage({
destination: (req, file, cb) => {
    cb(null, DIR);
},
filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + '' + path.extname(file.originalname));
}
});
let upload = multer({ storage: user_storage }).array('files',10);

API功能

router.post('/newUpload',function(req,res){
console.log('before upload',req.body);
upload(req,res,function(err) {
    //console.log(req.body);
    //console.log(req.files);
    if(err) {
        return res.end("Error uploading file.");
    }
    console.log('files', req.files);
    console.log(req.body);
    res.send(req.files);
    //res.end("File is uploaded");
});
});

这是我尝试的。数组中的最后一个文件仅保存在上传文件夹中。我也想插入数据库的名字，姓

编辑quetion 我得到了我缺少的地方。它在角度代码中：当我打印

时

const files: Array<File> = this.filesToUpload;

我收到上传的最后一个文件。意味着它获取最后一个文件，而不是所有文件上传。所以我使用以下功能

getFiles(){
return this.uploader.queue.map((fileItem) => {
      return fileItem.file;
   });
}

so在onsubmit函数中

onSubmit() {
let files = this.getFiles();
let formData = new FormData();
for(let i = 0; i < files.length;i++){
  console.log(files[i]);
  formData.append("files", files[i],files[i]['name']);
}

当我安装文件[i]时，获取所有文件。但是在formdata.append Line中，我有以下错误

Argument of type 'FileLikeObject' is not assignable to parameter of type 'string | Blob'.
Property 'slice' is missing in type 'FileLikeObject' but required in type 'Blob

p.s：当我在formdata.append中发送文件名时，我在节点serevr中获取所有文件名。

Answer 1

尝试不同的解决方案后，我得到了工作解决方案，该解决方案也将多个文件和其他输入字段发送到SEVER。

在我的编辑零件中，我有以下功能

getFiles(){
return this.uploader.queue.map((fileItem) => {
  return fileItem.file;
});
}

上面的代码给出了错误。我刚刚更改了返回线。

来自

return fileItem.file;

to

return fileItem.file.rawFile;

就是这样。所有剩余的代码均与编辑中的代码相同。

Answer 2

您忘记在路由器上添加Multer中间件应该是

outer.post('/newUpload',
    upload.array('myFiles', 12),
    function(req,res){
    upload(req,res,function(err) {
   if(err) {
        return res.end("Error uploading file.");
    }
    res.send(req.files);
    //res.end("File is uploaded");
});
});