Uppy - 图片来自我的手机
今天的越写悦快乐之系列文章为大家带来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，文件上传作为一个常见的功能，通常会和其他业务场景一起为用户提供一致优越的用户体验，我相信这仅仅是一个开始，我们不仅要搞明白文件上传的原理，还要持续改进我们的产品和服务，为用户创造价值。你的个人价值也会在工作中慢慢体现，我也相信你会在工作中找到乐趣，快乐工作，工作快乐是我们不懈的追求。若是我的文章对你有所启发，那将是我莫大的荣幸。
网友评论