nestjs + vue3 自定义formdata上传文件

Vue 代码

<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<template>
  <el-upload
    ref="uploadRef"
    :headers="headers"
    method="post"
    :file-list="fileList"
    class="upload-demo"
    :on-error="errorHandler"
    :auto-upload="false"
    :on-change="fileChange"
  >
    <template #trigger>
      <el-button type="primary">select file</el-button>
    </template>



   
  </el-upload>
  <el-button @click="doUploadForm1">upload1</el-button>
  <el-upload
    ref="uploadRef"
    :headers="headers"
    method="post"
    :file-list="fileList2"
    class="upload-demo"
    :on-error="errorHandler"
    :auto-upload="false"
    :on-change="fileChange2"
    multiple
  >
    <template #trigger>
      <el-button type="primary">select file</el-button>
    </template>



   
  </el-upload>
  <el-button @click="doUploadForm2">upload2</el-button>
</template>
<script lang="ts" setup>

import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus';
import {formUpload, formUploadFiles} from "@/apis/upload.api"


const uploadRef = ref()
const fileList = ref([])
const headers = reactive({
  Authorization: localStorage.getItem('token')
})
const errorHandler = (err: any, file: any, fileList: any) => {
  console.log(file, fileList);
  
  ElMessage.error(err.message)
}

const fileChange = (a:any) => {
  console.log(a)
  fileList.value.push(a)
  
  
}

const doUploadForm1 = async () => {
  const data = new FormData()
  data.append('hello', 'hello')
  data.append('world', 'world')
  data.append('file', fileList.value[0].raw)
  console.log(fileList)
  try {
    await formUpload(data)
    
  } catch (error) {
    console.log(error);
    
  }
  
}

const fileList2 = ref([])

    console.log(123)
const fileChange2 = (file) => {
  fileList2.value.push(file) 
}
const doUploadForm2 = async () => {
  const data = new FormData()
  data.append('hello', 'hello')
  data.append('world', 'world')
  fileList2.value.forEach(file => {
    data.append('files', file.raw)
  })
  // console.log(fileList)
  try {
    await formUploadFiles(data)
    
  } catch (error) {
    console.log(error);
    
  }

}
</script>

nestjs代码：

import { Body, Controller, Post } from '@nestjs/common';
import { UploadService } from './upload.service';
import { UseInterceptors } from '@nestjs/common';
import {
  FileInterceptor,
  FileFieldsInterceptor,
} from '@nestjs/platform-express';
import { UploadedFile, UploadedFiles } from '@nestjs/common';
import { diskStorage } from 'multer';
import { extname, join } from 'path';

@Controller('upload')
export class UploadController {
  constructor(private uploadService: UploadService) { }
  @Post('file')
  @UseInterceptors(
    FileInterceptor('file', {
      storage: diskStorage({
        // destination: (req, file, cb) => {
        //   cb(null, join(__dirname, '../../public/files')); // 指定文件存储的目录
        // },
        destination: join(__dirname, '../../../', 'static', 'files'),
        filename: (req, file, cb) => {
          // 使用原始文件名（保留扩展名）并添加时间戳前缀
          const uniqueSuffix =
            Date.now() + '-' + Math.round(Math.random() * 1e9);
          cb(null, uniqueSuffix + extname(file.originalname));
        },
      }),
    }),
  )
  uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body) {
    // 配置 Multer 存储引擎
    console.log('=========file, body======');
    console.log(Buffer.from(file.originalname, 'latin1').toString('utf8'));
    console.log(file);
    console.log(body);
    return 'ok';
  }

  @Post('files')
  @UseInterceptors(
    FileFieldsInterceptor(
      [
        { name: 'files', maxCount: 10 }, // 假设你允许最多上传10个文件
      ],
      {
        storage: diskStorage({
          // destination: (req, file, cb) => {
          //   cb(null, join(__dirname, '../../public/files')); // 指定文件存储的目录
          // },
          destination: join(__dirname, '../../../', 'static', 'files'),
          filename: (req, file, cb) => {
            // 使用原始文件名（保留扩展名）并添加时间戳前缀
            const uniqueSuffix =
              Date.now() + '-' + Math.round(Math.random() * 1e9);
            cb(null, uniqueSuffix + extname(file.originalname));
          },
        }),
      },
    ),
  )
  uploadMultipleFiles(
    @UploadedFiles() files: Array<Express.Multer.File>,
    @Body() body,
  ) {
    // 拿到 文件和 body 去service 处理
    console.log(files, body);
    return 'ok2';
  }
}