使用 Angular 13 和 Node Js 上传文件（带有其他输入和文本区域）

Question

我正在尝试使用 multer 使用 Angular 和 Node 将文件上传到服务器。

我有 Todo 模型：

export class TodoModel {
  todo_id !:number;
  todo_title !:string;
  todo_description !:string;
  todo_status !:number;
  todo_deleted_flag !:boolean;
  todo_image !:Object; 
}

todo.component.ts

title:string;
  desc:string;
  selected_image:File = null;

fileUploadListener(event){
    //console.log(event)
    //console.log(event.target.files[0])
    this.selected_image  = <File>event.target.files[0]
    console.log(this.selected_image)
  }
  onSubmit(form:NgForm){
    
    const fd = new FormData()
    if(this.selected_image) {
      fd.append('todo_image',this.selected_image,this.selected_image.name)

    }
    console.log(fd);
    const todo_model : TodoModel = {
      todo_id: null,
      todo_title:this.title,
      todo_description:this.desc,
      todo_status:1,
      todo_deleted_flag:false,
      todo_image:null
    }


    console.log(fd);

    this.todoAdd.emit(todoadded);
    this.todoAdd_DB.emit(todo_model);
    this.addTodo_DB(todo_model, fd)
    form.resetForm();
  }

  addTodo_DB(todo_db: TodoModel, fileUpload:Object){
    //const todo_db

    return this.http.post<{message:any}>('http://localhost:3000/api/todos/post_all_todos_db', todo_db,fileUpload).subscribe(data => {
      console.log(data.message);
      console.log(todo_db);
    })
  }

todo.component.html

<div class="col-md-12">
    <form (ngSubmit)="onSubmit(todoForm)" #todoForm="ngForm">
      <div class="mb-3">
        <label for="todo_title" class="form-label">Title</label>
        <input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title">

      </div>
      <div class="mb-3">
        <label for="label" class="form-label">Description</label>
        <textarea  class="form-control" id="todo_description" [(ngModel)]="desc" name="desc"></textarea>
      </div>
      <div class="mb-3">
        <label for="todo_image" class="form-label">Image</label>
        <input type="file" class="form-control" id='todo_image' (change)="fileUploadListener($event)">
      </div>
      <button type="submit" class="btn btn-success">Add To Do</button>
    </form>
  </div>
</div>

在服务器端，使用 Node Js 和 PgSQL :-

app.post('/api/todos/post_all_todos_db',upload_using_multer.single('todo_images') , (req, res, next) => {
  // const todo_post = req.body;
  const files = req.file;
  console.log(files)  // - ----------> This does NOT work
  console.log(req.body) //------> this works
   
   //PGSQL insert query here

           res.status(201).json({
                     message:"Post Added Successfully"
                   })
})

在 Angular 端执行 console.log() 时，我正在获取表单数据，但在 Node Js 端，我将其设为 null。

我看到的几乎每个教程都只使用一个文件上传，并且尝试使用表单的action 提交表单。我不想这样做，所以我尝试这样做。

我

Answer 1

我曾经遇到过同样的问题并用 formdata 解决了，我的示例上传了多个文件。这是一个例子：

Node.JS

const serverRoutes = (function () {
  const express = require('express');
  const router = express.Router();
  const multer = require('multer');
  const upload = multer();

  router.post('/myresource', upload.any(), (req, res) => {
   console.log(req.files);
  });
 return router;
});

角度

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

  sendMyFiles(file): Observable<MyResponse> {
    const formData = new FormData();
    formData.append("file", file);
    return this.http.post<MyResponse>(
      `${environment.backendAPI}myresource`,
      formData
    );
  }
}