本网站(662p.com)打包出售,且带程序代码数据,662p.com域名,程序内核采用TP框架开发,需要联系扣扣:2360248666 /wx:lianweikj
精品域名一口价出售:1y1m.com(350元) ,6b7b.com(400元) , 5k5j.com(380元) , yayj.com(1800元), jiongzhun.com(1000元) , niuzen.com(2800元) , zennei.com(5000元)
需要联系扣扣:2360248666 /wx:lianweikj
利用node+koa+axios实现图片上传和回显功能
追忆似水年华 · 186浏览 · 发布于2022-05-19 +关注

这篇文章为大家详细介绍了如何利用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> <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" 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字段一致 此时就可以愉快的上传啦~~~ 

 


相关推荐

RN开发环境的npm私库本地debug调试

manongba · 688浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理

追忆似水年华 · 1362浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式

追忆似水年华 · 980浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取

manongba · 708浏览 · 2019-06-10 09:16:16
10个省时间的 PyCharm 技巧 赶快收藏!

· 691浏览 · 2019-06-10 09:32:01
加载中

0评论

评论
分类专栏
小鸟云服务器
扫码进入手机网页