今天的越寫悅快樂之系列文章爲大家帶來Vue項目如何集成Uppy。作爲一名愛做夢的碼農來說，不管是前端、後端、抑或是測試、運維，都需要保持一定的好奇心纔可以，那麼大家都知道Vue作爲前端框架的集大成者，擁有着易用、靈活和高效的優點，那麼對於在Vue項目中集成Uppy，大家有沒有實踐過呢？今天我爲大家分享一下如何在Vue項目中集成Uppy。
最近Uppy官方剛發佈了對Vue的支持，欲知詳情，請參考官方文檔
開發環境
- 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。
接入步驟
創建項目
我們可以通過兩種方式來創建項目：
1）命令行
-
vue create uppy-go(選擇默認配置)
2）Vue UI
在命令行或者終端輸入vue ui即可打開默認瀏覽器，然後選擇項目存放位置、輸入項目信息、包管理方式等信息，最後點擊創建工程。
安裝依賴Uppy組件
我們在終端下執行以下命令：
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組件中，我們可以使用以下組件來構建頁面：
- <dashboard /> - renders an inline @uppy/dashboard (渲染一個內聯組件)
- <dashboard-modal /> - renders a @uppy/dashboard modal (渲染一個彈窗組件)
- <drag-drop /> - renders a @uppy/drag-drop area (渲染一個拖拽區域)
- <progress-bar /> - renders a @uppy/progress-bar (渲染一個進度條)
- <status-bar /> - renders a @uppy/status-bar (渲染一個狀態條)
代碼說明
- 導入組件
- 定義component
- 綁定計算屬性
- 定義文件上傳回調
查看集成結果
我們在項目所在的控制檯執行yarn serve命令執行以下操作：
- 打開瀏覽器
- 按下F12打開開發者工具
- 切換到開發者工具的Network頁籤
- 選擇要上傳的文件
- 點擊上傳
- 查看控制檯輸出
參考
個人收穫及總結
本文介紹瞭如何在Vue項目中集成Uppy，文件上傳作爲一個常見的功能，通常會和其他業務場景一起爲用戶提供一致優越的用戶體驗，我相信這僅僅是一個開始，我們不僅要搞明白文件上傳的原理，還要持續改進我們的產品和服務，爲用戶創造價值。你的個人價值也會在工作中慢慢體現，我也相信你會在工作中找到樂趣，快樂工作，工作快樂是我們不懈的追求。若是我的文章對你有所啓發，那將是我莫大的榮幸。