如何利用node+koa+axios实现图片上传和回显功能
今天小编给大家分享一下如何利用node+koa+axios实现图片上传和回显功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
开发前需要掌握的一些库
koa：用来起一个web服务器
koa2-cors: 解决跨域问题
@koa/router: koa的路由处理
koa-body： koa参数的获取
koa-static: 静态内容
@koa/multer multer:图片上传的插件
代码结构
实现代码
用koa+koa-router搭建一个简单的web服务
//main.jsconst Koa = require('koa') // 引入koaconst Router = require('koa-router') // 引入koa-routerconst koaBody = require('koa-body')router.get('/', async (ctx) => { ctx.type = 'html' ctx.body = '<h2>hello world!</h2>'})app.use(router.routes()) .use(router.allowedMethods()) .use(koaBody())// 启动服务监听本地3000端口app.listen(3000, () => { console.log('应用已经启动，http://localhost:3000')})现在我们就可以打开http://localhost:3000看到 hello world
接着我们新建一个upload文件夹,且在代码中加入静态内容的的代码
//mian.js 新增代码const serve = require('koa-static')const path = require('path')app.use(serve(path.join(__dirname, './upload')))此时假如你在upload文件夹下新增一张照片便可通过http://localhost:3000/***.png 查看到了。（***：你自己新增的照片名称加后缀）
此时新增一个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 class="lazy" data-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实现图片上传和回显功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
