利用node+koa+axios实现图片上传和回显功能

更新时间：2022年05月18日 16:06:19 作者：Yoge

这篇文章为大家详细介绍了如何利用node+koa+axios实现图片上传和回显功能，主要实现简单的图片上传和静态内容的访问，感兴趣的可以了解一下

前言

代码地址

开发前需要掌握的一些库

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 = '<h1>hello world!</h1>'
})
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文件，且加入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" class="file" name="avatar">
  <button onclick="send()">上传</button>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    let formData = new FormData()
    document.querySelector('.file').addEventListener('change', function(e) {
          let files = e.target.files
          console.log(files)
          if (!files.length) return
          formData.append('file', files[0], files[0].name)
        })
        function send(){
          axios.post('http://localhost:3000/upload',formData,{
            Headers:{
              "Content-type":"multipart/form-data"
            }
          })
        }
  </script>
</body>
</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字段一致此时就可以愉快的上传啦~~~

到此这篇关于利用node+koa+axios实现图片上传和回显功能的文章就介绍到这了,更多相关node koa axios图片上传回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Koa 使用小技巧(小结)
这篇文章主要介绍了Koa 使用小技巧(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
node.js中的buffer.toString方法使用说明
这篇文章主要介绍了node.js中的buffer.toString方法使用说明,本文介绍了buffer.toString的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12
nodejs微信开发之接入指南
这篇文章主要介绍了nodejs微信开发之接入指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
node.js自动上传ftp的脚本分享
这篇文章主要给大家介绍了一个关于node.js自动上传ftp脚本的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
2018-06-06
mongoose中利用populate处理嵌套的方法
这篇文章主要给大家介绍了关于mongoose中利用populate处理嵌套的方法，文中通过示例代码介绍的非常详细，对大家具有一的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
浅谈Koa服务限流方法实践
本篇文章主要介绍了浅谈Koa服务限流方法实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
nodejs个人博客开发第七步后台登陆
这篇文章主要为大家详细介绍了nodejs个人博客开发的后台登陆功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
搭建基于express框架运行环境的方法步骤
Express提供了一个轻量级模块，把Node.js的http模块功能封装在一个简单易用的接口中，这篇文章主要介绍了搭建基于express框架运行环境的方法步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
Node.JS如何实现JWT原理
jwt是json web token的简称，本文介绍它的原理，最后后端用nodejs自己实现如何为客户端生成令牌token和校验token
2020-09-09
Node.js中使用Buffer编码、解码二进制数据详解
这篇文章主要介绍了Node.js中使用Buffer编码、解码二进制数据详解,Buffer支持ascii、utf8、ucs2、base64等编码格式,需要的朋友可以参考下
2014-08-08