越写悦快乐之Vue项目如何集成Uppy

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

个人收获及总结

本文介绍了如何在Vue项目中集成Uppy，文件上传作为一个常见的功能，通常会和其他业务场景一起为用户提供一致优越的用户体验，我相信这仅仅是一个开始，我们不仅要搞明白文件上传的原理，还要持续改进我们的产品和服务，为用户创造价值。你的个人价值也会在工作中慢慢体现，我也相信你会在工作中找到乐趣，快乐工作，工作快乐是我们不懈的追求。若是我的文章对你有所启发，那将是我莫大的荣幸。