今天的越寫悅快樂之系列文章為大家?guī)鞻ue項目如何集成Uppy。作為一名愛做夢的碼農(nóng)來說，不管是前端、后端、抑或是測試、運(yùn)維，都需要保持一定的好奇心才可以，那么大家都知道Vue作為前端框架的集大成者，擁有著易用、靈活和高效的優(yōu)點，那么對于在Vue項目中集成Uppy，大家有沒有實踐過呢？今天我為大家分享一下如何在Vue項目中集成Uppy。
最近Uppy官方剛發(fā)布了對Vue的支持，欲知詳情，請參考官方文檔
開發(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)建項目
我們可以通過兩種方式來創(chuàng)建項目：
1）命令行
-
vue create uppy-go(選擇默認(rèn)配置)
2）Vue UI
在命令行或者終端輸入vue ui即可打開默認(rèn)瀏覽器，然后選擇項目存放位置、輸入項目信息、包管理方式等信息，最后點擊創(chuàng)建工程。
安裝依賴Uppy組件
我們在終端下執(zhí)行以下命令：
yarn add @uppy/core @uppy/tus @uppy/vue -S
綁定Uppy
既然我們在項目中引入了Uppy，那么我們可以直接在App.vue文件中引入Uppy組件，具體的寫法可參考以下代碼：
<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 (渲染一個內(nèi)聯(lián)組件)
- <dashboard-modal /> - renders a @uppy/dashboard modal (渲染一個彈窗組件)
- <drag-drop /> - renders a @uppy/drag-drop area (渲染一個拖拽區(qū)域)
- <progress-bar /> - renders a @uppy/progress-bar (渲染一個進(jìn)度條)
- <status-bar /> - renders a @uppy/status-bar (渲染一個狀態(tài)條)
代碼說明
- 導(dǎo)入組件
- 定義component
- 綁定計算屬性
- 定義文件上傳回調(diào)
查看集成結(jié)果
我們在項目所在的控制臺執(zhí)行yarn serve命令執(zhí)行以下操作：
- 打開瀏覽器
- 按下F12打開開發(fā)者工具
- 切換到開發(fā)者工具的Network頁簽
- 選擇要上傳的文件
- 點擊上傳
- 查看控制臺輸出
參考
個人收獲及總結(jié)
本文介紹了如何在Vue項目中集成Uppy，文件上傳作為一個常見的功能，通常會和其他業(yè)務(wù)場景一起為用戶提供一致優(yōu)越的用戶體驗，我相信這僅僅是一個開始，我們不僅要搞明白文件上傳的原理，還要持續(xù)改進(jìn)我們的產(chǎn)品和服務(wù)，為用戶創(chuàng)造價值。你的個人價值也會在工作中慢慢體現(xiàn)，我也相信你會在工作中找到樂趣，快樂工作，工作快樂是我們不懈的追求。若是我的文章對你有所啟發(fā)，那將是我莫大的榮幸。
