“文件”类型上不存在属性“位置”

Question

我已将 multer 更改为 multer-s3。为此改变控制器。我将存储“位置”而不是“文件名”。但我收到打字稿错误。

我现在使用Localstack。

这是我的代码：

multer.s3.middleware.ts

import validateFileForBucket from '@/common/validateFileForBucket';
import { AWS_BUCKET_NAME } from '@/config';
import aws from 'aws-sdk';
import multer from 'multer';
import multerS3 from 'multer-s3';

// Configure AWS for localstack
aws.config.update({
  accessKeyId: 'testKEYId',
  secretAccessKey: 'testSecret',
  region: 'ap-south-1',
  sslEnabled: false,
  endpoint: 'http://localhost:4566',
  s3ForcePathStyle: true,
} as any);

const s3 = new aws.S3();

// Define Multer-S3 upload
const uploadS3 = multer({
  fileFilter: (req, file, cb) => {
    const bucket = req.params.bucket;
    validateFileForBucket(bucket, file, cb);
  },
  storage: multerS3({
    s3: s3 as any,
    bucket: AWS_BUCKET_NAME as string,
    metadata: function (req, file, cb) {
      cb(null, { fieldName: file.fieldname });
    },
    key: function (req: any, file, cb) {
      const bucket = req.params.bucket ? `${req.params.bucket}/` : '';
      cb(null, `${bucket}${Date.now()}-${file.originalname}`);
    },
  }),
});

export default uploadS3;

用户.route.ts

this.router
  .route('/create')
  .post(
    authMiddleware,
    uploadS3.single('profileImage'),
    validationMiddleware(createUserSchema, 'body'),
    this.userController.create,
  );

用户.controller.ts

public create = async (req: Request, res: Response) => {
  req.body.profileImage = req.file?.location;
  req.body.user = req.tokenData.user;
  const responseData = await this.userRepository.createUser(req.body as CreateUserInterface);
  return generalResponse(req, res, responseData, successMessage.USER_CREATE_SUCCESS, false, responseFlag.SUCCESS);
};

由于某种原因，我收到打字稿错误：

TSError: ⨯ Unable to compile TypeScript:
src/controllers/user/user.controller.ts:24:39 - error TS2339: Property 'location' does not exist on type 'File'.

24     req.body.profileImage = req.file?.location;

如果我记录 req.file，我会获取文件数据，并且它有位置。

req.file:  {
  fieldname: 'profileImage',
  originalname: 'profile.jpeg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  size: 6182,
  bucket: 'aws-bucket-name',
  key: '1711716164482-profile.jpeg',
  acl: 'private',
  contentType: 'application/octet-stream',
  contentDisposition: null,
  contentEncoding: null,
  storageClass: 'STANDARD',
  serverSideEncryption: null,
  metadata: { fieldName: 'profileImage' },
  location: 'http://localhost:4566/aws-bucket-name/1711716164482-profile.jpeg',
  etag: '"806170f0b2a191c8c967372af939cc6d"',
  versionId: undefined
}

将鼠标悬停在请求上。

file

显示

(property) Express.Request.file?: Express.Multer.File | undefined
Multer.File object populated by single() middleware.

不应该是

Express.MulterS3.File

吗？

作为 TS 新手，我不知道如何解决这个问题。 我在 google、stackoverflow 以及 multer-s3 github issues 上进行了搜索。但似乎没有人遇到类似的错误。

我不确定我做错了什么。预先感谢您。

Answer 1

我不知道您是否解决了您的问题，但您应该做的是扩展express文件类型以使用multerS3配置而不是普通的multer配置。 您可以通过在项目的根目录中创建自定义声明文件index.d.ts（文件可以命名为任何名称，只要以.d.ts结尾即可）并在其中声明全局命名空间来实现此目的

import express from 'express';
import { Express } from 'express';
import { Request } from 'express';

declare global {
  namespace Express {
    interface Request {
      file ? : Express.MulterS3.File
    }
  }
}

然后通过向 tsconfig.json 文件添加 files 选项并在其中包含自定义声明文件来确保编译器选择您的自定义声明文件

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    // other compiler options
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"],
  "files": ["index.d.ts"] // we're including the file here
}