node+koa+axios实现一个简单的图片上传和回显功能

前言：主要实现简单的图片上传和静态内容的访问

---

代码地址

go~

效果图

upload.gif

开发前需要掌握的一些库：

• koa：用来起一个web服务器
• koa2-cors: 解决跨域问题
• koa-router: koa的路由处理
• koa-body： koa参数的获取
• koa-static: 静态内容
• @koa/multer multer:图片上传的插件

直接上代码

1.第一步:用koa+koa-router搭建一个简单的web服务

//main.js
const Koa = require('koa') // 引入koa
const Router = require('koa-router') // 引入koa-router
const koaBody = require('koa-body')
router.get('/', async (ctx) => {
    ctx.type = 'html'
    ctx.body = '
hello world!
'
})
app.use(router.routes())
    .use(router.allowedMethods())
    .use(koaBody())

// 启动服务监听本地3000端口
app.listen(3000, () => {
    console.log('应用已经启动，http://localhost:3000')
})

现在我们就可以打开http://localhost:3000看到 hello world

2.接着我们新建一个upload文件夹,且在代码中加入静态内容的的代码

//mian.js 新增代码
const serve = require('koa-static')
const path = require('path')
app.use(serve(path.join(__dirname, './upload')))

此时假如你在upload文件夹下新增一张照片便可通过http://localhost:3000/.png 查看到了。（：你自己新增的照片名称加后缀）

3.此时新增一个index.html文件，且加入以下代码

  
  
  
  


  
  上传
  
  

选择图片且上传会发现存在跨域问题，那么发现问题解决问题直接上代码：

//mian.js新增代码
const cors = require('koa2-cors')
app.use(cors())//注意这个配置要在router前使用不然不生效

解决完跨域后,选择图片且上传.咦~404好吧没有新增对应的router,走起：

router.post('/upload', async (ctx) => {
    ctx.body = 'ok'
})

此时咱们已经拿到传过来的数据啦，重头戏来了：@koa/multer使用

const multer = require('@koa/multer')
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './upload')
    },
    filename: function (req, file, cb) {
        const fileFormat = (file.originalname).split('.')
        cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
    }
})
const upload = multer({ storage })

配置好后修改/upload

router.post('/upload', upload.single('file'), async (ctx) => {
    console.log('ctx.request.body', ctx.request.body)
    ctx.body = 'done'
})

note:需要注意的是upload.single('file'),中的file需要和上方的index.html中的formData字段一致
此时就可以愉快的上传啦~~~

• 都看到这啦，点个赞再走吧~