ToB企服应用市场:ToB评测及商务社交产业平台

标题: koa实现图片上传接口(当地生成) [打印本页]

作者: 莫张周刘王    时间: 前天 22:32
标题: koa实现图片上传接口(当地生成)
目录结构

  1. my-koa-app/
  2. ├── config/               # 配置文件夹
  3. │   └── database.js       # 数据库连接配置
  4. ├── controllers/          # 控制器,包含具体的业务逻辑
  5. │   └── uploadImageController.js # 用户相关的控制器
  6. ├── models/               # Mongoose 数据模型
  7. │   └── uploadImage.js           # 用户模型
  8. ├── routes/               # 路由定义
  9. │   └── routes.js     # 用户相关路由
  10. ├── uploads/               # 上传图片目录
  11. ├── app.js                # Koa 应用的入口文件
  12. └── package.json          # 项目配置文件
复制代码
安装npm包

  1. npm install koa koa-router koa-bodyparser mongoose koa-static koa-multer
复制代码
代码示例

app.js
  1. const Koa = require('koa');
  2. const bodyParser = require('koa-bodyparser');
  3. const connectDB = require('./config/database');
  4. const koaStatic = require('koa-static');
  5. const userRoutes = require('./routes/routes');//引入路由
  6. const path = require('path');
  7. // 连接到数据库
  8. connectDB();
  9. const app = new Koa();
  10. // 使用 bodyParser 解析请求体
  11. app.use(bodyParser());
  12. // 静态文件服务
  13. app.use(koaStatic(path.join(__dirname, 'uploads'))); // 提供上传文件的静态资源服务
  14. // 加载 user 路由
  15. app.use(userRoutes.routes()); // 使用 userRoutes 路由
  16. app.use(userRoutes.allowedMethods()); // 使用 allowedMethods
  17. // 启动服务器
  18. app.listen(3000, () => {
  19.   console.log('Server is running on http://localhost:3000');
  20. });
复制代码
config/database.js
  1. // config/database.js
  2. const mongoose = require('mongoose');
  3. const connectDB = async () => {
  4.   try {
  5.     await mongoose.connect('mongodb://localhost:端口号/数据库名称');//例如:mongodb://localhost:27017/xxxx
  6.     console.log('MongoDB connected');
  7.   } catch (err) {
  8.     console.error(err);
  9.   }
  10. };
  11. module.exports = connectDB;
复制代码
models/uploadImage.js
  1. const mongoose = require('mongoose');
  2. // 创建图片存储的 Schema 和 Model
  3. const ImgSchema = new mongoose.Schema({
  4.     filename: String,//文件名称
  5.     path: String,//文件目录
  6.     url: String, // 用来存储图片的URL
  7.     createdAt: { type: Date, default: Date.now },//创建时间
  8.   });
  9.   
  10.   const photoImg = mongoose.model('photoImg', ImgSchema);
  11.   module.exports = photoImg;
复制代码
controllers/uploadImageController.js
  1. const multer = require('@koa/multer');
  2. const path = require('path');
  3. const photoImg = require('../models/uploadImage');  // 引用正确的模型
  4. // 配置上传目录,确保 uploads 目录存在
  5. const upload = multer({
  6.   dest: path.join(__dirname, '/../uploads/'),  // 上传的文件存储路径
  7.   limits: { fileSize: 5 * 1024 * 1024 }, // 限制文件大小为 5MB
  8. });
  9. // 上传图片接口的逻辑
  10. const uploadImage = async (ctx) => {
  11.     const { file } = ctx.request;  // 获取上传的文件
  12.     console.log('File:', file);  // 打印文件信息
  13.     if (!file) {
  14.       ctx.status = 400;
  15.       ctx.body = { error: 'No file uploaded' };  // 如果没有文件上传
  16.       return;
  17.     }
  18.   
  19.     const imageUrl = `http://localhost:3000/uploads/${file.filename}`; // 图片的 URL 地址
  20.   
  21.     // 保存文件信息到数据库
  22.     const newPhoto = new photoImg({
  23.       filename: file.originalname,
  24.       path: file.path,
  25.       url: imageUrl,
  26.     });
  27.   
  28.     try {
  29.       await newPhoto.save();
  30.       ctx.status = 201;
  31.       ctx.body = { success: true, url: imageUrl }; // 返回图片的 URL
  32.     } catch (err) {
  33.       ctx.status = 500;
  34.       ctx.body = { error: 'Failed to save image', details: err.message };
  35.     }
  36.   };
  37.   
  38.   
  39. // 获取所有图片信息
  40. const getPhotos = async (ctx) => {
  41.   try {
  42.     const photos = await photoImg.find(); // 查询所有图片
  43.     ctx.body = { success: true, data: photos };
  44.   } catch (err) {
  45.     ctx.status = 500;
  46.     ctx.body = { error: 'Failed to fetch photos' };
  47.   }
  48. };
  49. // 获取指定 ID 的图片信息
  50. const getPhotoById = async (ctx) => {
  51.   const { id } = ctx.params;
  52.   try {
  53.     const photo = await photoImg.findById(id); // 根据 ID 查找图片
  54.     if (!photo) {
  55.       ctx.status = 404;
  56.       ctx.body = { success: false, message: 'Photo not found' };
  57.     } else {
  58.       ctx.status = 200;
  59.       ctx.body = { success: true, data: photo };
  60.     }
  61.   } catch (err) {
  62.     ctx.status = 500;
  63.     ctx.body = { success: false, message: 'Network error' };
  64.   }
  65. };
  66. module.exports = {
  67.   uploadImage,
  68.   getPhotos,
  69.   getPhotoById,
  70.   upload,  // 导出上传中间件
  71. };
复制代码
routes/routes.js
  1. // routes/routes.js
  2. const Router = require('koa-router');
  3. const  imgController = require('../controllers/uploadImageController')
  4. const router = new Router();
  5. // 图片上传接口
  6. // 定义 Post 请求 - 获取用户信息
  7. router.post('/upload', imgController.upload.single('image'), imgController.uploadImage);
  8. // 定义 GET 请求 - 获取所有图片
  9. router.get('/photos', imgController.getPhotos);
  10. // 定义 GET 请求 -  获取指定 ID 的图片
  11. router.get('/photos/:id', imgController.getPhotoById);
  12. module.exports = router;
复制代码
测试

发起postman哀求,参数为image,格式类型为file

当地上传file打印结果:

哀求前uploads目录为空

哀求成功后uploads添加成功数据


查看数据库path,url目录保存图片,是否访问成功


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4