使用 multer 并通过 typescript 表达

Question

背景

我正在制作一个简单的网站，用户可以在其中上传图像。 我正在使用 Node/React/Multer/Typescript。

问题

app.post('/admin/uploads', async (req, res) => {
  uploadHandler(req, res, (err) => {
    ...
    if ( req.files.companyImage !== undefined ) {
      ...
    }
    res.sendStatus(201);
  });
});

typescript intellisense 显示如下错误。

Property 'companyImage' does not exist on type '{ [fieldname: string]: File[]; } | File[]'.
Property 'companyImage' does not exist on type '{ [fieldname: string]: File[]; }'.ts(2339)

但是，我不明白为什么这是错误。我认为

files

对象具有类型

{ [fieldname: string]: File[]; }

。这意味着

files

对象可以具有字符串属性。

所以我用简单的例子进行测试。

type myType = {
  [fieldName: string]: number
}

let req: myType = {
  a: 333,
  b: 344
}

console.log(req.a);
console.log(req.c); // undefined but intellisense don't show error

我不知道为什么

files

对象不能有

companyImage

属性。

请检查。

Answer 1

我不知道你是否成功解决了你的问题，但我也有同样的问题，并且必须明确地告诉 TypeScript 我的

req.files

属性的类型，如下所示：

const files = req.files as { [fieldname: string]: Express.Multer.File[] };

请注意，由于我使用的是

upload.fields(...)

，因此我没有指定

req.files

也可以是简单的

Express.Multer.File[]

。

Answer 2

由于您使用的是打字稿，因此为文件创建一个接口

interface IFile {
  fieldname: string;
  originalname: string;
  encoding: string;
  mimetype: string;
  buffer: Buffer;
  size: number;
}

然后声明

const files = req.files as IFile[]

并记住在 types/express/index.d.ts 中添加

files: IFile;

as

declare global {
  namespace Express {
    interface Request {
      files: IFile;
    }
  }
}

Answer 3

在这里，我的 TypeScript 版本也有同样的问题

(^5.2.2)

。尽管我在 Multer 上找不到任何类型，但在这里我确实解决了我的问题。

在全局类型文件上声明命名空间

export type IFile = {
  fieldname: string;
  originalname: string;
  encoding: string;
  mimetype: string;
  buffer: Buffer;
  size: number;
};

declare global {
  namespace Express {
    type Request = {
      files: IFile;
    };
  }
}

然后在我需要的地方使用它们和声明的类型

const fileInfo = (req.files as { fileName?: IFile[] })['fileName']?.[0];

这里，

fileName

包含您的

formData

文件名

Answer 4

我通过

Object.assign(req.files)

解决了它，然后你可以将它作为一个对象来处理：

console.log(s.image[0].path);