今天的越寫悅快樂之系列文章為大家?guī)鞻ue項(xiàng)目如何集成Uppy淌实。作為一名愛做夢的碼農(nóng)來說冻辩，不管是前端、后端拆祈、抑或是測試恨闪、運(yùn)維，都需要保持一定的好奇心才可以放坏，那么大家都知道Vue作為前端框架的集大成者咙咽，擁有著易用、靈活和高效的優(yōu)點(diǎn)淤年，那么對(duì)于在Vue項(xiàng)目中集成Uppy钧敞，大家有沒有實(shí)踐過呢？今天我為大家分享一下如何在Vue項(xiàng)目中集成Uppy麸粮。
最近Uppy官方剛發(fā)布了對(duì)Vue的支持犁享，欲知詳情，請(qǐng)參考官方文檔
開發(fā)環(huán)境
- Window 10.0.17763
- Node 10.18.0
- Visual Studio Code 1.48.2
- Vue 2.6.12
- Uppy 1.23.2
- Vue CLI 4.5.7
特別說明
Uppy是一款簡潔豹休、開源、模塊化的JavaScript文件上傳框架桨吊，支持Angular威根、Vue和React。
接入步驟
創(chuàng)建項(xiàng)目
我們可以通過兩種方式來創(chuàng)建項(xiàng)目：
1）命令行
-
vue create uppy-go(選擇默認(rèn)配置)
2）Vue UI
在命令行或者終端輸入vue ui即可打開默認(rèn)瀏覽器视乐，然后選擇項(xiàng)目存放位置洛搀、輸入項(xiàng)目信息、包管理方式等信息佑淀，最后點(diǎn)擊創(chuàng)建工程留美。
安裝依賴Uppy組件
我們?cè)诮K端下執(zhí)行以下命令：
yarn add @uppy/core @uppy/tus @uppy/vue -S
綁定Uppy
既然我們?cè)陧?xiàng)目中引入了Uppy，那么我們可以直接在App.vue文件中引入U(xiǎn)ppy組件伸刃，具體的寫法可參考以下代碼：
<template>
<div id="app">
<dashboard :uppy="uppy" :plugins="['Webcam']"/>
</div>
</template>
<script>
import { Dashboard } from '@uppy/vue'
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
export default {
name: 'App',
components: {
Dashboard
},
computed: {
uppy: () => new Uppy()
.use(Webcam)
.use(Tus, { endpoint: 'https://master.tus.io/files/' })
.on('complete', result => {
console.log('successful files:', result.successful)
console.log('failed files:', result.failed)
})
},
beforeDestroy () {
this.uppy.close()
}
}
</script>
在官方封裝的Vue組件中谎砾，我們可以使用以下組件來構(gòu)建頁面：
- <dashboard /> - renders an inline @uppy/dashboard (渲染一個(gè)內(nèi)聯(lián)組件)
- <dashboard-modal /> - renders a @uppy/dashboard modal (渲染一個(gè)彈窗組件)
- <drag-drop /> - renders a @uppy/drag-drop area (渲染一個(gè)拖拽區(qū)域)
- <progress-bar /> - renders a @uppy/progress-bar (渲染一個(gè)進(jìn)度條)
- <status-bar /> - renders a @uppy/status-bar (渲染一個(gè)狀態(tài)條)
代碼說明
- 導(dǎo)入組件
- 定義component
- 綁定計(jì)算屬性
- 定義文件上傳回調(diào)
查看集成結(jié)果
我們?cè)陧?xiàng)目所在的控制臺(tái)執(zhí)行yarn serve命令執(zhí)行以下操作：
- 打開瀏覽器
- 按下F12打開開發(fā)者工具
- 切換到開發(fā)者工具的Network頁簽
- 選擇要上傳的文件
- 點(diǎn)擊上傳
- 查看控制臺(tái)輸出
參考
個(gè)人收獲及總結(jié)
本文介紹了如何在Vue項(xiàng)目中集成Uppy，文件上傳作為一個(gè)常見的功能捧颅，通常會(huì)和其他業(yè)務(wù)場景一起為用戶提供一致優(yōu)越的用戶體驗(yàn)景图，我相信這僅僅是一個(gè)開始，我們不僅要搞明白文件上傳的原理碉哑，還要持續(xù)改進(jìn)我們的產(chǎn)品和服務(wù)挚币，為用戶創(chuàng)造價(jià)值亮蒋。你的個(gè)人價(jià)值也會(huì)在工作中慢慢體現(xiàn)，我也相信你會(huì)在工作中找到樂趣妆毕，快樂工作慎玖，工作快樂是我們不懈的追求。若是我的文章對(duì)你有所啟發(fā)笛粘，那將是我莫大的榮幸趁怔。
