欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用node+koa+axios實(shí)現(xiàn)圖片上傳和回顯功能

 更新時(shí)間：2022年05月18日 16:06:19   作者：Yoge  
這篇文章為大家詳細(xì)介紹了如何利用node+koa+axios實(shí)現(xiàn)圖片上傳和回顯功能，主要實(shí)現(xiàn)簡單的圖片上傳和靜態(tài)內(nèi)容的訪問，感興趣的可以了解一下

前言

代碼地址

開發(fā)前需要掌握的一些庫

koa：用來起一個(gè)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搭建一個(gè)簡單的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.接著我們新建一個(gè)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í)新增一個(gè)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())//注意這個(gè)配置要在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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • npm全局環(huán)境變量配置詳解

    npm全局環(huán)境變量配置詳解

    這篇文章主要介紹了npm全局環(huán)境變量配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • nodejs命令行參數(shù)處理模塊commander使用實(shí)例

    nodejs命令行參數(shù)處理模塊commander使用實(shí)例

    這篇文章主要介紹了nodejs命令行參數(shù)處理模塊commander使用實(shí)例,commander是一個(gè)非常高大上的令行參數(shù)處理模塊,需要的朋友可以參考下
    2014-09-09
  • 淺談Node.js ORM框架Sequlize之表間關(guān)系

    淺談Node.js ORM框架Sequlize之表間關(guān)系

    下面小編就為大家?guī)硪黄獪\談Node.js ORM框架Sequlize之表間關(guān)系。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • 在Mac OS下使用Node.js的簡單教程

    在Mac OS下使用Node.js的簡單教程

    這篇文章主要介紹了在Mac OS下使用Node.js的簡單教程,Node.js是讓JavaScript應(yīng)用運(yùn)行于服務(wù)器端的框架,需要的朋友可以參考下
    2015-06-06
  • 手寫Node靜態(tài)資源服務(wù)器的實(shí)現(xiàn)方法

    手寫Node靜態(tài)資源服務(wù)器的實(shí)現(xiàn)方法

    這篇文章主要介紹了手寫Node靜態(tài)資源服務(wù)器的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • Node.JS 循環(huán)遞歸復(fù)制文件夾目錄及其子文件夾下的所有文件

    Node.JS 循環(huán)遞歸復(fù)制文件夾目錄及其子文件夾下的所有文件

    在Node.js中，要實(shí)現(xiàn)目錄文件夾的循環(huán)遞歸復(fù)制也非常簡單，使用fs模塊即可，僅需幾行，而且性能也不錯(cuò)，我們先來實(shí)現(xiàn)文件的復(fù)制,需要的朋友可以參考下
    2017-09-09
  • 初識Node.js

    初識Node.js

    本文主要是簡單講訴了Node.js的介紹，安裝，希望對剛剛接觸Node.js的同學(xué)能有所幫助，有什么問題可以給我留言，一起學(xué)習(xí)進(jìn)步
    2014-09-09
  • npm?install報(bào)錯(cuò)unable?to?resolve?dependency?tree的解決辦法

    npm?install報(bào)錯(cuò)unable?to?resolve?dependency?tree的解決辦法

    在開發(fā)過程中經(jīng)常會使用npm安裝依賴包來加速開發(fā),但是在執(zhí)行npm install命令時(shí),有時(shí)會遇到各種錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于npm?install報(bào)錯(cuò)unable?to?resolve?dependency?tree的解決辦法,需要的朋友可以參考下
    2023-05-05
  • Node.js檢測端口(port)是否被占用的簡單示例

    Node.js檢測端口(port)是否被占用的簡單示例

    大家有沒有遇到過在開啟本地服務(wù)時(shí)，有這么一種情況：當(dāng)前端口已經(jīng)被另一個(gè)項(xiàng)目使用了，導(dǎo)致服務(wù)開啟失敗。那么接下來，我們通過簡簡單單的示例代碼來檢測端口是否已經(jīng)被占用。有需要的朋友們可以參考借鑒。
    2016-09-09
  • node.js中的fs.lstatSync方法使用說明

    node.js中的fs.lstatSync方法使用說明

    這篇文章主要介紹了node.js中的fs.lstatSync方法使用說明,本文介紹了fs.lstatSync的方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下
    2014-12-12

最新評論