如何将图像、Pdf 和少量参数从 Angular 一起发送到 Node.Js 服务器答案

【问题标题】：How to Send Image , Pdf and Few Parameters together From Angular to Node.Js Server如何将图像、Pdf 和少量参数从 Angular 一起发送到 Node.Js 服务器
【发布时间】：2020-09-20 11:25:43
【问题描述】：

我正在使用 Angular Material 获取可拖动图像的位置，从用户获取输入类型文件（pdf）和存储在 ./assets/emojis/ 中的图像。我可以使用 ng2-file-upload 和 multer 将 Pdf 从 Angular 发送到 Node。前端

<input (change)="onFileSelected()" ng2FileSelect [uploader]="uploader" type="file" id="file">
<ion-button class="input-group-text upload" (click)="uploader.uploadAll()" >Upload</ion-button>

后台

app.post('/api/upload', upload.single('pdf'), function (req, res) {
    console.log('File is available!');
    return res.send({
      success: true
    })
  });

现在我有用户在资产中选择的图像路径

imagePathToUpload:string = './assets/emojis/'+this.selectedEmoji
topPosition:number = this.topPos
leftPosition:number = this.leftPos

如何将所有这些数据一起发送到服务器，有一种方法 FormData 但我不明白如何使用它。目标是将 Image 、 Pdf 、 left 和 top 位置发送到服务器。任何建议都将不胜感激。

【问题讨论】：

标签： node.js angular file multipartform-data

【解决方案1】：

从 Angular 发送文件 --> Nodejs 很简单

创建上传方法

FinalformData: FormData;
uploadFile(event) {
  if (event.target.files && event.target.files.length > 0) {
    const file = event.target.files[0];
    this.FinalformData = new FormData();
    this.FinalformData.append('file', file, file.name);
  }
}

submit() {
    // call your service and send it 
    this._sendfileService.sendFile(this.FinalformData)
        .subscribe( res => {
            if (res.success) { 
                console.log('file uploaded'); 
            } else { console.log('faild uploading file'))}
        })
}

现在一切都完成了，用你的 http.post 方法在这里和前调用你的角度服务

sendFile(file: FormData): Observable<any> {
     return this.http.post<any>(this.nodejsUrl, file);
}

要在后端处理文件，请查看 multer https://www.npmjs.com/package/multer

【讨论】：

感谢 karimov，但这部分我已经在问题中提到了。请阅读问题，他们没有可以从中获取文件的事件。我所拥有的只是我想发送到服务器的文件路径。