今天小編給大家分享一下如何利用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 = '<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
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實現圖片上傳和回顯功能”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
