在处理文件上传的时候，需要注意 配置的文件名称 否则会报400错误。

单文件上传

  1.   单文件上传
  2. <input type="file" id="file">
  3. <button onclick="sendFile()">上传</button>
  6. let file = null;
  7. document.getElementById('file').addEventListener('change', e => {
  8.   file = e.target.files[0]
  9. })
  10. //  普通文件上传
  11. function sendFile() {
  12.   const formData = new FormData();
  13.   formData.append('file', file);
  14.   axios({
  15.     url: "http://localhost:3000/upload/file",
  16.     method: "POST",
  17.     data: formData
  18.   })
  19.     .then((result) => {
  20.     console.log(result)
  21.   }).catch((err) => {
  22.     console.log(err);
  23.   });
  24. }
  1. import { Body, Controller, Post, UploadedFile, UploadedFiles, UseInterceptors } from '@nestjs/common';
  2. //  引入文件上传模块
  3. import { FileInterceptor, FileFieldsInterceptor } from '@nestjs/platform-express'
  4. //  获取写入流
  5. import { createWriteStream } from 'fs'
  6. import { join } from 'path'
  8. @Controller('upload')
  9. export class UploadController {
  10.     //  当个文件上传
  11.     @Post('file')
  12.     @UseInterceptors(FileInterceptor('file'))//  配置文件上传名称
  13.     upload(@UploadedFile() file, @Body() body) {// UploadedFile    获取上传图片的信息
  14.         let filePath = join(__dirname, '..', '..', 'public/images', `${Date.now()}-${file.originalname}`);
  15.         let writeStream = createWriteStream(filePath)
  16.         writeStream.write(file.buffer)
  17.         return 'updata ok'
  18.     }
  19. }

多文件上传

  1. <input type="file" id="file1">
  2. <input type="file" id="file2">
  3. <button onclick="sendFiles()">多文件上传</button>
  1. let file1 = null;
  2. let file2 = null;
  3. document.getElementById('file1').addEventListener('change', (e) => {
  4.   file1 = e.target.files[0]
  5. })
  6. document.getElementById('file2').addEventListener('change', (e) => {
  7.   file2 = e.target.files[0]
  8. })
  10. function sendFiles() {
  11.   const formData = new FormData();
  12.   formData.append('pic1', file1)
  13.   formData.append('pic2', file2)
  14.   axios({
  15.     url: "http://localhost:3000/upload/files",
  16.     method: "POST",
  17.     data: formData
  18.   })
  19.     .then(res => {
  20.     console.log(res);
  21.   })
  22.     .catch(err => {
  23.     console.log(err);
  24.   })
  25. }
  1. import { Body, Controller, Post, UploadedFile, UploadedFiles, UseInterceptors } from '@nestjs/common';
  2. //  引入文件上传模块
  3. import { FileInterceptor, FileFieldsInterceptor } from '@nestjs/platform-express'
  4. //  获取写入流
  5. import { createWriteStream } from 'fs'
  6. import { join } from 'path'
  8. @Controller('upload')
  9. export class UploadController {
  10.   //  多个文件上传
  11.   @Post('files')
  12.   //  多个不同字段 用 FileFieldsInterceptor
  13.   @UseInterceptors(FileFieldsInterceptor([
  14.     { name: "pic1", maxCount: 1 },
  15.     { name: "pic2", maxCount: 1 },
  16.   ]))
  17.   uploads(@UploadedFiles() files, @Body() body) {
  18.     for (const k in files) {
  19.       files[k].forEach(element => {
  20.         console.log(element.originalname);
  21.         let writeStream = createWriteStream(join(__dirname, `../../public/images`,`${Date.now()}-${element.originalname}`));
  22.         writeStream.write(element.buffer)
  23.       });
  24.     }
  26.     return '1'
  27.   }
  28. }

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  9.     <title>Document</title>
  10. </head>
  12. <body>
  13.     <div>
  14.         单文件上传
  15.         <input type="file" id="file">
  16.         <button onclick="sendFile()">上传</button>
  17.     </div>
  18.     <div>
  19.         多文件上传
  20.         <input type="file" id="file1">
  21.         <input type="file" id="file2">
  22.         <button onclick="sendFiles()">多文件上传</button>
  23.     </div>
  24. </body>
  26. </html>
  27. <script>
  28.     let file = null;
  29.     document.getElementById('file').addEventListener('change', e => {
  30.         file = e.target.files[0]
  31.     })
  32.     //  普通文件上传
  33.     function sendFile() {
  34.         const formData = new FormData();
  35.         formData.append('file', file);
  36.         axios({
  37.             url: "http://localhost:3000/upload/file",
  38.             method: "POST",
  39.             data: formData
  40.         })
  41.             .then((result) => {
  42.                 console.log(result)
  43.             }).catch((err) => {
  44.                 console.log(err);
  45.             });
  46.     }
  48.     /**
  49.      * 多文件上传
  50.      */
  51.     let file1 = null;
  52.     let file2 = null;
  53.     document.getElementById('file1').addEventListener('change', (e) => {
  54.         file1 = e.target.files[0]
  55.     })
  56.     document.getElementById('file2').addEventListener('change', (e) => {
  57.         file2 = e.target.files[0]
  58.     })
  60.     function sendFiles() {
  61.         const formData = new FormData();
  62.         formData.append('pic1', file1)
  63.         formData.append('pic2', file2)
  64.         console.log(file1);
  65.         console.log(file2);
  66.         axios({
  67.             url: "http://localhost:3000/upload/files",
  68.             method: "POST",
  69.             data: formData
  70.         })
  71.             .then(res => {
  72.                 console.log(res);
  73.             })
  74.             .catch(err => {
  75.                 console.log(err);
  76.             })
  77.     }
  78. </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  9.     <title>Document</title>
  10. </head>
  12. <body>
  13.     <div>
  14.         单文件上传
  15.         <input type="file" id="file">
  16.         <button onclick="sendFile()">上传</button>
  17.     </div>
  18.     <div>
  19.         多文件上传
  20.         <input type="file" id="file1">
  21.         <input type="file" id="file2">
  22.         <button onclick="sendFiles()">多文件上传</button>
  23.     </div>
  24. </body>
  26. </html>
  27. <script>
  28.     let file = null;
  29.     document.getElementById('file').addEventListener('change', e => {
  30.         file = e.target.files[0]
  31.     })
  32.     //  普通文件上传
  33.     function sendFile() {
  34.         const formData = new FormData();
  35.         formData.append('file', file);
  36.         axios({
  37.             url: "http://localhost:3000/upload/file",
  38.             method: "POST",
  39.             data: formData
  40.         })
  41.             .then((result) => {
  42.                 console.log(result)
  43.             }).catch((err) => {
  44.                 console.log(err);
  45.             });
  46.     }
  48.     /**
  49.      * 多文件上传
  50.      */
  51.     let file1 = null;
  52.     let file2 = null;
  53.     document.getElementById('file1').addEventListener('change', (e) => {
  54.         file1 = e.target.files[0]
  55.     })
  56.     document.getElementById('file2').addEventListener('change', (e) => {
  57.         file2 = e.target.files[0]
  58.     })
  60.     function sendFiles() {
  61.         const formData = new FormData();
  62.         formData.append('pic1', file1)
  63.         formData.append('pic2', file2)
  64.         console.log(file1);
  65.         console.log(file2);
  66.         axios({
  67.             url: "http://localhost:3000/upload/files",
  68.             method: "POST",
  69.             data: formData
  70.         })
  71.             .then(res => {
  72.                 console.log(res);
  73.             })
  74.             .catch(err => {
  75.                 console.log(err);
  76.             })
  77.     }
  78. </script>