[记录六]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——服务端图片上传与下载

大家好,我是小佑@小佐:https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。
前言:本项目需要涉及前端上传图片与显示图片,为此自己实践一下图片相关的东西,挺有意思所以就分享出来。
实现思路:服务端的处理方式是将前端上传的文件保存在服务端本地,然后重命名该文件名字,再将图片在服务端的路径存入表中,前端请求图片地址的时候去服务端找出文件并返回给前端显示。

在routes文件夹下新建一个common.js文件

//common.js
//导入所需模块
const router = require('koa-router')()
const api = require('../controllers/api')
const common = require('../util/comon')
const path = require('path')
const fs = require('fs')
const formidable = require('formidable')
const MimeLookup = require('mime-lookup')
const mime = new MimeLookup(require('mime-db'))
router.prefix('/common')

上传图片

//common.js
//上传图片
router.post('/addUploadImg', async (ctx, next) => {
  console.log(ctx.req)
  let form = new formidable.IncomingForm()
  form.hash = "md5"
  form.multiples = false //默认只能上传一个文件,更多form的配置参考node-formidable
  form.maxFileSize = 2 * 1024 * 1024 //设置文件最大不超过2M
  let type = ['image/png','image/gif','image/jpg','image/jpeg','image/webp']//支持上传的图片类型
  function formImage() {
    return new Promise((resolve, reject) => {
      form.parse(ctx.req, async function (err, fields, files) {//注意:跟express有差异,这里要传入ctx.req
      let file = files['file']
      if (file) {
        let flag = await common.checkFile(file.type, file.size) //校验文件的大小和类型
        console.log('校验通过'+flag)
        if (flag) { //文件校验通过
          const oldpath = file['_writeStream'].path //系统缓存上传的文件地址
          const dir = path.join(__dirname, `../common/upload/img`)
          const fileFormat = file.name.split('.')
          file.name = `${file.hash}_${Date.now()}.${fileFormat[fileFormat.length - 1]}` //通过file.hash加时间戳生成文件名
          const newpath = `common/upload/img/${file.name}`
          if (!fs.existsSync(dir)) { //先判断文件夹名是否存在,不存在则生成根据XXX生成对应的文件夹
            fs.mkdirSync(dir)
          }
          //如果是非WINDOWS系统,可以用fs.renameSync()来实现,这里为了兼容用了node的pipe来实现
          let readStream = fs.createReadStream(oldpath)
          let writeStream = fs.createWriteStream(newpath)
          readStream.pipe(writeStream) //这里文件已经上传成功
          resolve(ctx.origin + "/" + newpath) //返回完整的文件地址
        } else {
            reject(null)
          }
      } else {
          reject(null)
        }
      })
    })
  }
  await formImage()
    .then(res => { 
      ctx.body = {
        code: 200,
        status: 200,
        data: res,
        message:'上传成功'
      }
    }).catch(err => { 
      ctx.body = {
        code: 400,
        status: 200,
        data: {},
        message:'上传失败'
      }
    }
  )
})

下载图片

//common.js
//显示图片
router.get('/upload/img/:imgUrl', async (ctx, next) => {
  url=ctx.url
  let index = url.lastIndexOf('/')
  imgUrl = url.substring(index + 1, url.length)
  let filePath = path.join(__dirname, `../common/upload/img/${imgUrl}`)
  file = fs.readFileSync(filePath)//读取文件
  // console.log(await watermark.addWatermark(file, options))
  let mimeType = mime.lookup(filePath) //读取图片文件类型
  ctx.set('content-type', mimeType) //设置返回类型
  ctx.body = file //返回图片
})

这里下载的意思是前端拿到图片链接,直接img src="https://***/upload/img.123sdjfhg.png"的时候服务端其实是需要响应前端的这个地址请求的,上面是收到请求后去服务端获取图片并读取然后返回文件回给前端。假设有做token校验是否可以请求api的话,建议将“/common/upload/”接口的路由放入白名单(免token)中去。

文件结构

最终在项目中呈现的结构是:
在这里插入图片描述
至此就完成前端图片上传和下载的需求了,感谢观看!

上一篇:使用swagger自动生成接口文档
上一篇:生成请求日志

  • 44
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 48
    评论
### 回答1: 全栈完整项目包括uniapp小程序vue后台管理系统node.js完整项目mysql数据库。这个项目的目标是开发一个全面的解决方案,用于构建一个多平台的应用程序。 首先,我们将使用uniapp小程序开发前端界面。uniapp是一个跨平台开发框架,可以同时适用于微信小程序、支付宝小程序、H5、安卓和iOS等平台。我们可以使用uniapp提供的各种组件和API来创建用户界面和交互。 其次,我们将使用vue框架开发后台管理系统Vue是一个轻量级的JavaScript框架,它提供了一种优雅的方式来构建用户界面。我们可以使用Vue的组件化开发思想和工具来构建管理系统的各个模块和功能。 然后,我们将使用node.js开发后端服务器。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,可以用于构建高性能的网络应用程序。我们可以使用Node.js的各种模块和框架来处理前端请求、访问数据库、实现业务逻辑等。 最后,我们将使用mysql数据库存储数据。MySQL是一个流行的关系型数据库管理系统,可以用于存储和管理应用程序中的数据。我们可以使用mysql的SQL语言来定义表结构、插入和更新数据、执行查询等操作。 这个全栈完整项目将涵盖前端开发、后台开发、数据库设计和管理等多个方面。通过使用不同的技术和工具,我们可以构建一个功能齐全、用户友好的应用程序,并能在多个平台上运行。 ### 回答2: 全栈完整项目是指开发人员可以同时处理前端、后端和数据库的开发工作。在这个问题中,需要开发一个包括uniapp小程序vue后台管理系统node.js完整项目全栈应用,并使用mysql数据库进行数据存储。 首先,我会基于uniapp框架开发一个小程序。uniapp是一个跨平台开发框架,可以同时开发iOS和Android平台的应用。我将使用vue语法进行开发,利用uniapp提供的组件和API实现小程序的各种功能,如用户登录、数据展示等。 其次,我会开发一个vue后台管理系统vue是一个流行的前端框架,用于构建单页应用。我将使用vue和element-ui等插件来实现后台管理系统的前端界面,包括用户管理、数据统计等功能,并通过API与后端进行数据交互。 然后,我会使用node.js开发一个完整的后端项目node.js是一个基于JavaScript运行的服务器端框架,具有高效、轻量级和事件驱动等特点。我将使用node.js编写服务器端的逻辑处理代码,包括用户认证、数据处理等功能。同时,我会使用express框架来简化开发流程,并使用mysql数据库进行数据的存储和查询。 最后,我会使用mysql数据库进行数据管理。mysql是一种常见的关系型数据库管理系统,我将使用它来设计和管理我所开发全栈应用所需要的表结构,并使用SQL语言进行数据的增删改查操作。 综上所述,我将使用uniapp、vuenode.js和mysql等技术栈,开发一个包含小程序、后台管理系统和完整的后端项目全栈应用。这个应用将具备完整的功能,同时满足用户的需求,并且可以对数据进行有效地管理。 ### 回答3: 全栈开发是指一个开发者可以独自负责开发一个完整的项目,包括前端、后端和数据库的搭建与开发。以下是一个使用uniapp小程序作为前端、vue作为后台管理系统node.js作为后端、mysql作为数据库的全栈完整项目的描述。 该项目的目标是开发一个综合性的小程序实现包括用户登录注册、商品展示、购物车管理、订单生成等功能。具体的技术选型如下: 1. 前端部分使用uniapp小程序进行开发。Uniapp是一个使用 Vue.js 进行开发跨平台应用的前端框架,支持一次开发,多平台发布。开发者可以使用Vue的语法进行UI界面的开发,并集成了微信小程序的API。 2. 后台管理系统使用vue进行开发Vue是一个轻量级的JavaScript框架,可以快速搭建用户友好的界面。通过使用Vue,我们可以开发出一个方便管理商品、订单等数据的后台管理系统。 3. 后端使用node.js进行开发Node.js是一个基于Chrome V8引擎的开源后台运行环境,使用JavaScript进行编写。通过使用Node.js,我们可以实现用户登录注册、商品数据的增删改查等后端逻辑。 4. 数据库使用mysql进行搭建。MySQL是一个开源的关系型数据库管理系统,提供了高效稳定的数据存储和查询。通过使用mysql,我们可以存储用户信息、商品信息、订单信息等数据。 在项目开发过程中,我们可以使用uniapp提供的API与微信小程序进行交互,实现用户登录注册、商品展示等功能。通过vue开发后台管理系统,可以实现对商品和订单等数据的管理。并且,通过node.js连接mysql数据库,实现对数据的增删改查操作。 全栈开发者需要具备前端、后端以及数据库的知识和能力,能够独立进行应用开发和维护。这个全栈完整项目开发将会全面锻炼开发者的技术水平,并且能够快速响应需求变化。
评论 48
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端发现

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值