通过 post 请求将 pdf 文件发送到服务器

Question

我的前端有一个供用户使用的 pdf 上传部分，我想从那里通过我创建的微服务将它发送到 s3 存储桶。我的微服务上有一条 post 路由需要该文件，但是当我从前端发送它时，它是空的。从前端发送文件时，我肯定遗漏了一些东西。

export class FileUpload {
   private file: File;

   constructor(
      private service: FileService;
   ) { }

   uploadFile(): void {
      const formdata = new FormData();
      formdata.append('pdf-file', this.file);

      this.service.upload(formdata).subscribe(uploaded => {
         console.log(uploaded);
      }
   }
}

export class FileService {
   constructor(private http: HttpClient) { }

   public upload(file) {
      const headers = new HttpHeaders({'Content-Type': 'multipart/form-data'});

      return this.http.post('http://myserviceurl/file', file, {headers: headers}).pipe(
         catchError(err => {
            return error;
         });  
   }
}

FileUploadclass里面的文件变量是用户上传的pdf文件。在我可以通过 http 请求发送文件之前，我有点想弄清楚我需要对文件做什么。任何帮助将不胜感激。

Answer 1

你的代码看起来不错。但是，我们应该了解我们对后端文件的期望。

我相信，文件或文件对象不需要任何更改。您只需将文件作为表单数据发送即可。

下面是在 angular 中上传文件作为表单数据，并在 Spring 引导中获取它的代码片段。

Angular 片段（用于将文件作为表单数据上传）：

uploadPdfFile(event) {
  const pdfFiles = event.target.files;
  const pdfFile = pdfFiles.item(0);

  const formdata: FormData = new FormData();
  formdata.append('pdfFile', pdfFile); // Should match the parameter name in backend

  this.http.post<any>('http://localhost:8088/file', formdata).subscribe(
  (data) => {
    console.log('Upload File ' + data);
  },
  (error) => {
    console.error(error.error);
  });
}

用于在参数中获取文件的后端微服务（Spring引导）：

@PostMapping(path = "file")
public String uploadPdfFile(@RequestParam("pdfFile") MultipartFile pdfFile) {
    // TODO: Save the file
    // TODO: Upload to S3
    return "done";
}

更多理解参考资料：

https://www.geeksforgeeks.org/angular-file-upload/

Answer 2

使用 FormData 上传文件 angular。

// 创建 FormData 对象

const formData = new FormData();

// 在 FormData 中添加值

formData.Append("key","value");

然后通过将 FormData 对象作为参数传递来调用您的方法。

uploadFile(): void {
  this.service.upload(formData).subscribe(uploaded => {
     console.log(uploaded);
  }

}

通过 post 请求将 pdf 文件发送到服务器

Sending a pdf file to a server through post request

pdf

http

http-post

angular