我正在尝试在 typescript 中使用 multer 我想上传一个文件但我的身体是空的 请告诉我如何修复它

Question

server.ts

const server = express()
      server.use(bodyParser.json({ limit: '10mb' }));
      server.use(bodyParser.urlencoded({ extended: true }));
      server.use(bodyParser.json())
      server.use(acl);
      server.use(cookieSession({
        name: 'session',
        keys: [config.jwtSecret],
        maxAge: 312460601000, // 31 days
      }));
    
      server.use(responses);
      server.use(scopePerRequest(container));
      const files = 'controllers/**/*.ts';
      server.use(loadControllers(files, { cwd: __dirname }));
    
      server.all('*', (req, res) => {
        return handle(req, res)
      })
    
    
      server.use(express.json());
      server.use(express.urlencoded({ extended: true }));
    
      startDataBase()
    
      server.listen(config.port, () => {
        console.log(`> Ready on http://localhost:${config.port}`)
      })

UploadController

import BaseContext from '../BaseContext';
import express from 'express'
import { Request, Response } from 'express';
import { route, GET, POST, DELETE, PATCH, before } from 'awilix-express';
import multer, { FileFilterCallback } from "multer"

type DestinationCallback = (error: Error | null, destination: string) => void
type FileNameCallback = (error: Error | null, filename: string) => void

export const fileStorage = multer.diskStorage({
  destination: (
    request: Request,
    file: Express.Multer.File,
    callback: DestinationCallback
  ): void => {
    callback(null, __dirname + '/uploads/')
  },

  filename: (
    req: Request,
    file: Express.Multer.File,
    callback: FileNameCallback
  ): void => {
    callback(null, Date.now() + '-' + file.originalname)
  }
})

export const fileFilter = (
  request: Request,
  file: Express.Multer.File,
  callback: FileFilterCallback
): void => {
  if (
    file.mimetype === 'image/png' ||
    file.mimetype === 'image/jpg' ||
    file.mimetype === 'image/jpeg'
  ) {
    callback(null, true)
  } else {
    callback(null, false)
  }
}


const upload = multer({ storage: fileStorage });


@route('/api/upload')
export default class Upload extends BaseContext {


  @POST()
  @before(upload.array("files"))
  @route('/file')
  save(req: any, res: Response) {
    console.log(req.files)
    console.log(req.body)
    res.json({ message: "Successfully uploaded files" });

  }

}

file.tsx

export interface MyState {


    files: any,

}

class Test extends React.Component<MyProps, MyState> {

    constructor(props) {
        super(props);
        this.state = {
            files: {}

        };

        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this)
    
    };

    handleChange(event) {
        this.setState({ files: event.target.files[0] })
    }

    handleClick(event) {

        let fullUrl = 'http://localhost:3000' + '/' + 'api/upload/file';
        const params: any = {
            method: 'POST',
            headers: {
                Authorization: 'bearer',
             

            },
        };

        const formData = new FormData();
        formData.append("files", this.state.files);


        params['headers']['content-type'] = 'multipart/form-data; boundary={boundary string}';
        params['body'] = formData;
        console.log(params)
        return fetch(fullUrl, params)
            .then((res) => console.log(res))
            .catch((err) => (err));

    render() {
        return (
            <div>
                <h1>Upload file</h1>
                <div>
                    <label>Файл</label><br />
                    <input type="file" name="filedata" onChange={this.handleChange} /><br /><br />
                    <button type="button" onClick={this.handleClick}>
                        Кнопка
                    </button>
                </div>
            </div>
        );
    }
}
export default Test;

I have reviewed many articles, and everything is mostly in js, I can't understand how to implement it correctly, no matter what I make my body empty, I think that there should be some other callback in @before

Maybe I'm somehow transferring the file wrong, I tried without converting it, then in json format, I stopped at formData, but my body is still empty

Answer 1

I use multer this way hope it helps you better understand how to implement it with your project:

import multer from "multer";

const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 1000000000, files: 1 },
  fileFilter(req, file, cb) {
    if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
      return cb(new Error("Please upload a valid image file"));
    }
    cb(null, true);
  },
});

app
  .post(
    "/",
    upload.single("image"), // or upload single for one file only
    async (req: Request, res: Response, next: NextFunction) => {

      const image = req.file;
 
      res.json({ message: "hello" });
    }
  )