能否结合Multer与GraphQL实现文件上传？求MongoDB相关方案

核心思路 #

Multer本身是为REST API设计的文件处理中间件，但可以通过在GraphQL请求链路中提前用Multer解析文件，再将文件数据传递给GraphQL resolver，结合MongoDB完成文件元数据或二进制内容的存储。关键是让GraphQL服务器支持multipart/form-data请求，并在路由层先处理文件上传。

具体实现步骤 #

1. 基础依赖安装

确保项目中已安装所需包：

npm install multer express express-graphql mongodb graphql

2. 配置Multer文件处理

根据需求选择存储方式（内存存储适合小文件，磁盘/GridFS适合大文件）：

const multer = require('multer');
// 内存存储（小文件场景）
const storage = multer.memoryStorage();
const upload = multer({
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 }, // 限制5MB
  fileFilter: (req, file, cb) => {
    // 过滤文件类型，示例仅允许图片
    if (file.mimetype.startsWith('image/')) {
      cb(null, true);
    } else {
      cb(new Error('仅支持图片格式文件'), false);
    }
  }
});

3. 整合Multer与GraphQL端点

在Express搭建的GraphQL服务中，先通过Multer处理文件，再进入GraphQL解析流程：

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const { MongoClient } = require('mongodb');

const app = express();
const PORT = 4000;

// 连接MongoDB
const client = new MongoClient('mongodb://localhost:27017');
let db;
client.connect().then(() => {
  db = client.db('file-upload-db');
});

// 定义GraphQL Schema
const schema = buildSchema(`
  type File {
    id: ID!
    filename: String!
    mimetype: String!
    size: Int!
  }

  type Mutation {
    uploadFile: File!
  }
`);

// 定义Resolver
const root = {
  uploadFile: async (args, req) => {
    const file = req.file;
    if (!file) throw new Error('未检测到上传文件');

    // 将文件元数据+二进制内容存入MongoDB集合（小文件场景）
    const result = await db.collection('files').insertOne({
      filename: file.originalname,
      mimetype: file.mimetype,
      size: file.size,
      buffer: file.buffer
    });

    return {
      id: result.insertedId.toString(),
      filename: file.originalname,
      mimetype: file.mimetype,
      size: file.size
    };
  }
};

// 挂载路由：先执行Multer的single中间件，再处理GraphQL请求
app.use('/graphql', upload.single('file'), graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true // 开启GraphiQL调试界面
}));

app.listen(PORT, () => {
  console.log(`GraphQL服务运行在 http://localhost:${PORT}/graphql`);
});

4. 大文件处理：使用MongoDB GridFS

如果需要上传大文件（超过16MB），建议用GridFS存储，配合multer-gridfs-storage：

npm install multer-gridfs-storage

配置GridFS存储引擎：

const GridFsStorage = require('multer-gridfs-storage');

const storage = new GridFsStorage({
  url: 'mongodb://localhost:27017/file-upload-db',
  file: (req, file) => {
    return {
      filename: file.originalname,
      bucketName: 'uploads' // GridFS存储桶名称
    };
  }
});
const upload = multer({ storage: storage });

此时Resolver中可以直接获取GridFS返回的文件信息：

const root = {
  uploadFile: async (args, req) => {
    const file = req.file;
    return {
      id: file.id.toString(),
      filename: file.filename,
      mimetype: file.mimetype,
      size: file.size
    };
  }
};

5. 前端调用示例

通过FormData构造符合GraphQL要求的multipart请求：

const uploadFile = async (file) => {
  const formData = new FormData();
  // 定义GraphQL查询
  formData.append('operations', JSON.stringify({
    query: `mutation { uploadFile { id filename } }`
  }));
  // 映射文件到请求
  formData.append('map', JSON.stringify({ '0': [] }));
  formData.append('0', file);

  const res = await fetch('http://localhost:4000/graphql', {
    method: 'POST',
    body: formData
  });
  const data = await res.json();
  return data.data.uploadFile;
};

// 触发上传
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (e) => {
  uploadFile(e.target.files[0]).then(console.log);
});

注意事项 #

• 如果使用Apollo Server，也可以通过自定义插件或中间件整合Multer，核心逻辑一致：先解析文件，再传递给resolver。
• 生产环境建议将文件存储到云存储（如OSS、S3），MongoDB仅存储文件元数据和访问地址，减少数据库压力。

内容的提问来源于stack exchange，提问作者Zohaib Muhammad