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

Question

我正在使用 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 但我不明白如何使用它。 目标是将图像、Pdf、左侧和顶部位置发送到服务器。任何建议将不胜感激。

Answer 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

Answer 2

要在 Angular 应用程序中向服务器发送多种类型的数据（例如图像、PDF 和位置等附加元数据），您确实可以使用 FormData。具体方法如下：

1. 准备数据：在发送数据之前，请确保您已准备好所有数据 准备好所需的数据，包括图像、PDF 文件和其他 元数据，例如顶部和左侧位置。
2. 创建FormData对象： 创建一个新的 FormData 对象并附加您想要的所有数据 发送到服务器。
3. 发送数据到服务器：使用Angular的HTTP客户端 (HttpClient) 将数据发送到服务器。

找到下面的示例代码

<input (change)="onFileSelected($event)" type="file" id="file">
<ion-button class="input-group-text upload" (click)="uploadData()">Upload</ion-button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  selectedPdf: File; // To store the selected PDF file
  selectedImage: File; // To store the selected image file
  topPosition: number; // Assuming these are initialized elsewhere in your code
  leftPosition: number; // Assuming these are initialized elsewhere in your code

  constructor(private http: HttpClient) {}

  // Method to handle file selection
  onFileSelected(event: any) {
    const file = event.target.files[0];
    // Check if file is a PDF or an image
    if (file.type === 'application/pdf') {
      this.selectedPdf = file;
    } else if (file.type.startsWith('image/')) {
      this.selectedImage = file;
    } else {
      console.error('Unsupported file type');
    }
  }

  // Method to upload data to the server
  uploadData() {
    if (!this.selectedPdf || !this.selectedImage) {
      console.error('Please select both a PDF file and an image');
      return;
    }
    
    // Prepare data
    const formData = new FormData();
    formData.append('pdf', this.selectedPdf);
    formData.append('image', this.selectedImage);
    formData.append('topPosition', this.topPosition.toString());
    formData.append('leftPosition', this.leftPosition.toString());

    // Send data to server
    this.http.post('/api/upload', formData).subscribe(
      (response) => {
        console.log('Data successfully sent to server:', response);
      },
      (error) => {
        console.error('Error sending data to server:', error);
      }
    );
  }
}