利用node+koa+axios實現圖片上傳和回顯功能

2022-05-18 19:01:48

前言

程式碼地址

開發前需要掌握的一些庫

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圖片上傳回顯內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

利用node+koa+axios實現圖片上傳和回顯功能

目錄

前言

開發前需要掌握的一些庫

程式碼結構

實現程式碼

熱門文章