利用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图片上传回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了实战node静态文件服务器的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术，本文给大家介绍nodejs实现websocket的数据库接收与发送，小伙伴们一起学习吧2015-11-11
这篇文章主要给大家介绍了node.js实现复制文本到剪切板的功能，文中介绍的非常详细，并给出示例代码，相信对大家具有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。2017-01-01
这篇文章主要介绍了node.js中的fs.readdirSync方法使用说明,本文介绍了fs.readdirSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了ExpressJS入门实例,本文讲解了创建项目、进入目录、安装项目依赖的包、创建应用程序、运行程序等内容,需要的朋友可以参考下2015-01-01
Pomelo是基于 Node.js 的高性能、分布式游戏服务器框架。它包括基础的开发框架和相关的扩展组件（库和工具包），可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发。Pomelo不但适用于游戏服务器开发，也可用于开发高实时 Web 应用2014-06-06
本篇文章主要介绍了基于node下的http小爬虫的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
在工作中,需要开发一个脚手架,用于给相关用户提供相关的开发便利性,下面这篇文章主要给大家介绍了关于node如何实现简单的脚手架的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家介绍了Nodejs使用dgram模块创建UDP服务详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要详细介绍了Node.js中HTTP模块与事件模块的相关资料,需要的朋友可以参考下2014-11-11
最新评论