在角度节点multer中上传多个文件

Question

我在上传 angular、node、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");
});
});

这是我尝试过的。只有数组中的最后一个文件保存在上传文件夹中。 我也想在数据库中插入名字、姓氏等，但是当我控制台 req.body 给出空 json {}

编辑问题 我到了我想念的地方。 它是角码：当我打印时

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

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

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

所以在 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 行中我得到以下错误

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

在尝试了不同的解决方案后，我终于得到了可以将多个文件和其他输入字段也发送到服务器的可行解决方案。

在我的编辑部分问题中，我使用了以下功能

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

上面的代码给出了错误。我刚刚换了退货线路。

来自

return fileItem.file;

到

return fileItem.file.rawFile;

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

Answer 2

您忘记将 multer 中间件添加到您的 router.post 应该是

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