【Node.js+koa--后端管理系统】上传图片 、动态配图 | 处理图片大小

简介: 【Node.js+koa--后端管理系统】上传图片 、动态配图 | 处理图片大小

上传图片(文件)接口设计思路


需求:图片(文件)上传 /upload/avatar

目的:服务器可以保存一张图片

解决:提供一个接口,可以让用户获取图片—>将URL存储到用户信息中—> 获取信息时,获取用户头像

微信图片_20221013115022.png


上传头像接口


① 图片上传路由配置

const Router = require ('koa-router')
const {
  verifyAuth
} = require('../middleware/auth_middleware')
const {
  avatarHandler
} = require('../middleware/file_middleware')
const {
  savaAvatarInfo
} = require('../controller/file_controller')
const fileRouter = new Router ({prefix: '/upload'})
fileRouter.post('/avatar',verifyAuth,avatarHandler,savaAvatarInfo)
module.exports = fileRouter

② 中间件 avatarHandler

微信图片_20221013115144.png

③ service 层数据库处理

微信图片_20221013115223.png


获取图像接口


① 路由配置

微信图片_20221013115259.png


② 获取图像处理函数

微信图片_20221013115332.png

③ 用户请求时,获取图像

微信图片_20221013115357.png

动态配图接口


① 路由配置微信图片_20221013115433.png

② 中间件添加函数

微信图片_20221013115503.png

③ 获取动态时,获取配图信息

微信图片_20221013115528.png



处理图片大小


微信图片_20221013115615.png微信图片_20221013115621.png微信图片_20221013115643.png

Ps:完整的路由配置

const Router = require ('koa-router')
const {
verifyAuth
} = require('../middleware/auth_middleware')
const {
avatarHandler,
pictureHandler,
pictureResize
} = require('../middleware/file_middleware')
const {
savaAvatarInfo,
savePictureInfo
} = require('../controller/file_controller')
const fileRouter = new Router ({prefix: '/upload'})
fileRouter.post('/avatar',verifyAuth,avatarHandler,savaAvatarInfo)
fileRouter.post('/picture', verifyAuth, pictureHandler,pictureResize, savePictureInfo);
module.exports = fileRouter

项目完结

相关文章
|
26天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
|
13天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
25天前
|
SQL XML 数据库
后端数据库开发高级之通过在xml文件中映射实现动态SQL
后端数据库开发高级之通过在xml文件中映射实现动态SQL
24 3
|
4天前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
14天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
22天前
|
JavaScript
fastadmin js里获取后端传的参数
fastadmin js里获取后端传的参数
26 0
|
2月前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
2月前
|
前端开发 JavaScript 中间件
基于最新koa的Node.js后端API架构与MVC模式
基于最新koa的Node.js后端API架构与MVC模式
51 1
|
2月前
|
JavaScript 前端开发 IDE
【TypeScript技术专栏】TypeScript与Node.js后端开发
【4月更文挑战第30天】TypeScript在Node.js后端开发中日益重要,作为JavaScript超集,它提供静态类型检查和面向对象编程,增强代码可靠性和维护性。集成TypeScript能带来类型安全、更好的IDE体验、易于维护的代码以及增强工具支持。通过安装TypeScript编译器、编写TypeScript文件、配置TSconfig,开发者可以在Node.js项目中利用其高级特性,提高代码质量和开发效率。实践案例显示,TypeScript能确保路由处理器的类型正确,降低错误率。随着社区发展,TypeScript成为提升Node.js开发体验的推荐选择。