Swagger UI不显示文件选择按钮问题求助

你的问题出在OpenAPI 3.0语法与旧版2.0语法混用，导致Swagger UI无法正确解析文件上传字段。你配置里声明了openapi: '3.0.0'，但注解用的是2.0的consumes和formData参数格式，两者不兼容。

以下是修正后的完整代码：

const express = require('express');
const multer = require('multer');
const swaggerJsdoc = require('swagger-jsdoc');
const swaggerUi = require('swagger-ui-express');

const app = express();
const port = process.env.PORT || 3000;

// Multer配置保持不变
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// Swagger基础配置保持不变
const swaggerOptions = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'File Upload API',
      version: '1.0.0',
    },
  },
  apis: ['./server.js'],
};

const swaggerSpec = swaggerJsdoc(swaggerOptions);

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

/**
 * @swagger
 * /upload:
 *   post:
 *     summary: 上传文件
 *     requestBody:
 *       required: true
 *       content:
 *         multipart/form-data:
 *           schema:
 *             type: object
 *             properties:
 *               file:
 *                 type: string
 *                 format: binary
 *                 description: 要上传的文件
 *     responses:
 *       200:
 *         description: 文件上传成功
 */
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).json({ message: '未上传文件' });
  }

  res.json({
    message: '文件上传成功',
    originalname: file.originalname,
    mimetype: file.mimetype,
    size: file.size,
  });
});

app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

关键修改说明 #

• 移除consumes字段：OpenAPI 3.0通过requestBody.content指定请求媒体类型，不再需要旧版的consumes
• 替换formData参数为requestBody：在multipart/form-data的schema中定义文件字段，使用type: string + format: binary的组合，这是OpenAPI 3.0识别文件上传的标准写法
• 后端Multer逻辑无需改动：你的文件处理代码本身没有问题，只需修正Swagger注解即可

重启服务后访问http://localhost:3000/api-docs/，就能看到正常的文件选择按钮了。

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