亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼

 更新時(shí)間：2024年02月02日 16:17:14   作者：勇寶趣學(xué)前端  
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3和Koa2實(shí)現(xiàn)圖片上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、技術(shù)摘要

本次實(shí)現(xiàn)的Demo使用到的技術(shù)主要有如下：

  • Vue3： 是一款用于構(gòu)建用戶界面的 JavaScript 框架。
  • koa： 基于 Node.js 平臺的下一代 web 開發(fā)框架。

以上就是我們本次要用到的一些技術(shù)棧，我把官方也給大家貼心的貼出來了，方便大家學(xué)習(xí)，任何技術(shù)都離不開原生，大家多多舉一反三。

二、圖片上傳流程概述

從概念的角度給大家伙梳理一下圖片上傳要做哪些事情。

1. 前端

首先我們要知道圖片上傳的一個(gè)大概的流程是什么，前端做點(diǎn)啥？后端做點(diǎn)啥？

我用最原生的方式給大家嘮一嘮，首先呢這個(gè)前端有一個(gè)<input id="file_upload" type="file" accept="image/*" />標(biāo)簽，這個(gè)大家應(yīng)該沒忘記吧。

一般我們是把這個(gè)input隱藏，自己寫那么幾個(gè)小按鈕，通過點(diǎn)擊按鈕觸發(fā)input點(diǎn)擊事件（click）來選擇要上傳的圖片對吧。

然后就是回顯的方式，一般有兩種：

  • 一種是等待后端處理好之后，response返回給我們前端然后去掛載。
  • 還有一種就是我們前端解析好之后去顯示，這種比較好，不浪費(fèi)服務(wù)器資源，哈哈哈。

最后的最后就是我們的請求頭要改為multipart/form-data。

2. 后端

首先是編寫我們圖片上傳的接口uploads。因?yàn)檫@里我演示的是koa這個(gè)框架，所有后端我們使用到@koa/multur這個(gè)插件。

設(shè)置我們圖片存放的路徑（文件夾），當(dāng)我們存儲成功之后，再把圖片信息存入我們的數(shù)據(jù)庫（這一步就不給大家演示了，況且我也就會個(gè)MongoDB，就不獻(xiàn)丑了），最后返回給前端成功的狀態(tài)碼。

三、項(xiàng)目搭建

這一塊沒有什么難度，我們簡單帶過。

前端

1. 初始化Vue

// 初始化模版
npm init vue@latest
// 安裝依賴
npm install
// 需要用到 axios HTTP請求
npm install axios --save

后端（koa2）

我千辛萬苦找了一個(gè)生成koa的腳手架，還不錯(cuò)。

1. 全局安裝腳手架

npm install koa-generator -g

2. 初始化項(xiàng)目

// serve是項(xiàng)目名稱，可以自定義
koa2 serve
// 安裝項(xiàng)目依賴
npm install

3. 運(yùn)行

npm run dev

四、開始擼代碼

前期工作準(zhǔn)備好之后，開始進(jìn)入我們的正題

1. 編寫html骨架

我們就寫兩個(gè)按鈕，一個(gè)用來選擇圖片，一個(gè)用來上傳到后端。

<template>
    <div class="upload">
        <input type="file" accept="image/*" class="upload-file" ref="selectFileRef" />
        <div class="upload-btns">
            <button class="upload-select">選擇圖片</button>
            <button class="upload-current">上傳圖片</button>
        </div>
        <!-- 用來回顯我們的圖片 -->
        <div class="upload-preview">
            <img src="" alt="圖片" />
        </div>
    </div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.upload-file {
display: none;
}
</style>

2. 定義回顯元素

如果我們的回顯src是空的話，我們就讓它隱藏。

<div class="upload-preview" v-show="previewUrl">
    <img src="" alt="圖片" />
</div>

<script>
import { ref } from 'vue'
const previewUrl = ref('')
</script>

3. 編寫選擇按鈕邏輯

使用ref獲取inputDOM元素，通過點(diǎn)擊選擇圖片按鈕，觸發(fā)input點(diǎn)擊事件。

<button class="upload-select" @click="selectFileRef.click">選擇圖片</button>
......
......
// 獲取input元素
const selectFileRef = ref(null)

此時(shí)我們點(diǎn)擊選擇圖片，瀏覽器就會彈框，就可以選擇我們要上傳的圖片啦！

4. 回顯選擇的圖片

我們使用上邊提到的第一種回顯的方式，這樣會減少http請求次數(shù)，減小服務(wù)器端壓力。這里我們要監(jiān)聽input元素的change事件，當(dāng)我們確定選擇好圖片之后會觸發(fā)這個(gè)事件。具體如下：

<input type="file" accept="image/*" class="upload-file" ref="selectFileRef" @change="showImg" />
......
......
 const showImg = () => {
     // 獲取我們上傳的元素
     const file = selectFileRef.value.files[0]
     // 把圖片轉(zhuǎn)成base64
     const reader = new FileReader()
     reader.readAsDataURL(file)

     reader.onload = () => {
         // 給我們的回顯元素賦值
         previewUrl.value = reader.result
     }
 }

5. 編寫上傳圖片按鈕

這是前端的最后一小步啦，這里我們主要注意請求header設(shè)置，還有數(shù)據(jù)類型{"Content-Type": "multipart/form-data"}，并且這里我們使用到了axios。

這里我就把axios直接拿過來用一下啦，以后有時(shí)間，我單獨(dú)好好的和小伙伴們嘮一嘮怎么好好的對axios進(jìn)行二次封裝。

<button class="upload-current" @click="upload">上傳圖片</button>
......
......
// 編寫上傳文件的處理邏輯方法
const upload = () => {
    const file = selectFileRef.value.files[0]
    
    const formData = new FormData()
    formData.append('files', file)
    
    reader.onload = () => {
        previewUrl.value = reader.result
    }
    
    // 使用axios發(fā)起http請求
    axios({
        method: 'post',
        url: 'http://localhost:3000/uploads',
        headers: {
        'Content-Type': 'multipart/form-data'
        },
        data: formData
    }).then(res => {
        //這里是后端返回給我們的結(jié)果
    })
}

6. 編寫后端代碼

后端不作為我們的重點(diǎn)，大概給大家擼一下代碼，主要是編寫我們的app.js文件。還需要安裝一下@koa/multer模塊。

npm install @koa/multer

編寫app.js

const Koa = require("koa");
const Router = require("koa-router");
const multer = require("@koa/multer");

const app = new Koa();
const router = new Router();

// 配置multer中間件
const upload = multer({
    storage: multer.diskStorage({
        //文件上傳保存的路徑
        destination: function (req, file, cb) {
            let dir = "./public/images"
            // 查看是否存在，不存在就創(chuàng)建
            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir, {
                    recursive: true
                })
            }
            // 這里的路徑必須要存在
            cb(null, dir)
        },
        //修改文件名稱
        filename: function (req, file, cb) {
            const fileName = file.fieldname + "-" + Date.now() + path.extname(file.originalname)
            cb(null, fileName)
        }
    })
})

// 編寫圖片上傳的接口
router.post('/uploads', upload.single('files'), async ctx => {
    const filename = ctx.request.file.filename
    path = ctx.request.origin + '/images/' + filename
    // 這里可以去操作數(shù)據(jù)庫把我們的url存入數(shù)據(jù)庫中方便使用。
    ctx.body = {
        code: 200,
        message: '圖片上傳成功',
        url: path
    }
})
......
......
app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
    console.log('This is port 3000...')
})

小結(jié)

到此圖片上傳功能完成，大家可以愉快的玩耍啦。其實(shí)大家只要把該注意的點(diǎn)都寫到基本就問題不大了。

五、總結(jié)

圖片上傳可以說是一個(gè)老生常談的問題了，對于小白來說的我，每次看到就頭大，但是這是不對的，我們應(yīng)該有著一顆敢于探索，敢于學(xué)習(xí)的精神，于是就決心狠狠的給它啃下。當(dāng)你學(xué)會一項(xiàng)技能的時(shí)候就會發(fā)現(xiàn)，原來是如此簡單（這是我作為小白的客觀評價(jià)，大佬勿噴，哈哈哈）。遇到困難分兩種：一種是知難而退、一種是迎難而上，這也是人和人之間有差距的根本原因。

以上就是Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Koa2圖片上傳的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論