利用node+koa+axios實(shí)現(xiàn)圖片上傳和回顯功能
前言
開發(fā)前需要掌握的一些庫
koa：用來起一個web服務(wù)器
koa2-cors: 解決跨域問題
@koa/router: koa的路由處理
koa-body： koa參數(shù)的獲取
koa-static: 靜態(tài)內(nèi)容
@koa/multer multer:圖片上傳的插件
代碼結(jié)構(gòu)
實(shí)現(xiàn)代碼
1.第一步:用koa+koa-router搭建一個簡單的web服務(wù)
//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())
// 啟動服務(wù)監(jiān)聽本地3000端口
app.listen(3000, () => {
console.log('應(yīng)用已經(jīng)啟動，http://localhost:3000')
})現(xiàn)在我們就可以打開http://localhost:3000看到 hello world
2.接著我們新建一個upload文件夾,且在代碼中加入靜態(tài)內(nèi)容的的代碼
//mian.js 新增代碼
const serve = require('koa-static')
const path = require('path')
app.use(serve(path.join(__dirname, './upload')))此時(shí)假如你在upload文件夾下新增一張照片便可通過http://localhost:3000/***.png 查看到了。（***：你自己新增的照片名稱加后綴）
3.此時(shí)新增一個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>選擇圖片且上傳會發(fā)現(xiàn)存在跨域問題，那么發(fā)現(xiàn)問題解決問題直接上代碼：
//mian.js新增代碼
const cors = require('koa2-cors')
app.use(cors())//注意這個配置要在router前使用不然不生效解決完跨域后,選擇圖片且上傳.咦~404好吧沒有新增對應(yīng)的router,走起：
router.post('/upload', async (ctx) => {
ctx.body = 'ok'
})此時(shí)咱們已經(jīng)拿到傳過來的數(shù)據(jù)啦，重頭戲來了：@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字段一致 此時(shí)就可以愉快的上傳啦~~~
到此這篇關(guān)于利用node+koa+axios實(shí)現(xiàn)圖片上傳和回顯功能的文章就介紹到這了,更多相關(guān)node koa axios圖片上傳回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- node.js實(shí)現(xiàn)為PDF添加水印的示例代碼
- 使用Node.js給圖片加水印的方法
- Node.js批量給圖片加水印的方法
- Node.js中Express框架使用axios同步請求(async+await)實(shí)現(xiàn)方法
- nodejs+axios爬取html出現(xiàn)中文亂碼并解決示例
- node+axios實(shí)現(xiàn)服務(wù)端文件上傳示例
- Node.js 使用axios讀寫influxDB的方法示例
- JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
- 使用python實(shí)現(xiàn)簡單去水印功能
- node.js去水印方法實(shí)例分析
相關(guān)文章
實(shí)戰(zhàn)node靜態(tài)文件服務(wù)器的示例代碼
本篇文章主要介紹了實(shí)戰(zhàn)node靜態(tài)文件服務(wù)器的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
淺析nodejs實(shí)現(xiàn)Websocket的數(shù)據(jù)接收與發(fā)送
WebSocket是HTML5開始提供的一種瀏覽器與服務(wù)器間進(jìn)行全雙工通訊的網(wǎng)絡(luò)技術(shù)，本文給大家介紹nodejs實(shí)現(xiàn)websocket的數(shù)據(jù)庫接收與發(fā)送，小伙伴們一起學(xué)習(xí)吧2015-11-11
node.js實(shí)現(xiàn)復(fù)制文本到剪切板的功能
這篇文章主要給大家介紹了node.js實(shí)現(xiàn)復(fù)制文本到剪切板的功能，文中介紹的非常詳細(xì)，并給出示例代碼，相信對大家具有一定的參考借鑒價(jià)值，有需要的朋友們下面來一起看看吧。2017-01-01
這篇文章主要介紹了node.js中的fs.readdirSync方法使用說明,本文介紹了fs.readdirSync方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了ExpressJS入門實(shí)例,本文講解了創(chuàng)建項(xiàng)目、進(jìn)入目錄、安裝項(xiàng)目依賴的包、創(chuàng)建應(yīng)用程序、運(yùn)行程序等內(nèi)容,需要的朋友可以參考下2015-01-01
Pomelo是基于 Node.js 的高性能、分布式游戲服務(wù)器框架。它包括基礎(chǔ)的開發(fā)框架和相關(guān)的擴(kuò)展組件（庫和工具包），可以幫助你省去游戲開發(fā)枯燥中的重復(fù)勞動和底層邏輯的開發(fā)。Pomelo不但適用于游戲服務(wù)器開發(fā)，也可用于開發(fā)高實(shí)時(shí) Web 應(yīng)用2014-06-06
本篇文章主要介紹了基于node下的http小爬蟲的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在工作中,需要開發(fā)一個腳手架,用于給相關(guān)用戶提供相關(guān)的開發(fā)便利性,下面這篇文章主要給大家介紹了關(guān)于node如何實(shí)現(xiàn)簡單的腳手架的相關(guān)資料,需要的朋友可以參考下2022-05-05
Nodejs使用dgram模塊創(chuàng)建UDP服務(wù)詳解
這篇文章主要為大家介紹了Nodejs使用dgram模塊創(chuàng)建UDP服務(wù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要詳細(xì)介紹了Node.js中HTTP模塊與事件模塊的相關(guān)資料,需要的朋友可以參考下2014-11-11