Vant 组件中使用 Upload 组件上传视频到七牛云

2023-09-15 18:46:44

前言

随着移动互联网的快速发展，视频已成为人们获取信息和娱乐的主要方式之一。为了满足用户需求，许多移动应用都加入了视频上传功能。Vant 是一个非常受欢迎的移动端组件库，它提供了许多开箱即用的组件，包括 Upload 组件。Upload 组件可以轻松实现文件上传功能，包括视频上传。

Vant 组件中使用 Upload 组件上传视频到七牛云的步骤

1. 安装 Vant 和七牛云 SDK

npm install vant
npm install qiniu-js

2. 在 App.vue 中引入 Vant 和七牛云 SDK

import Vue from 'vue'
import Vant from 'vant'
import Qiniu from 'qiniu-js'

Vue.use(Vant)

3. 在页面中使用 Upload 组件

<template>
  <div>
    <van-upload
      accept="video/*"
      :headers="headers"
      :action="action"
      :data="data"
      multiple
      @after-read="afterRead"
    >
      <div slot="default">
        <i class="icon icon-add"></i>
        <p>选择视频</p>
      </div>
    </van-upload>
  </div>
</template>

<script>
import { ref } from 'vue'
import Qiniu from 'qiniu-js'

export default {
  setup() {
    const headers = ref({})
    const action = ref('')
    const data = ref({})

    const afterRead = (files) => {
      const file = files[0]

      // 获取七牛云上传凭证
      Qiniu.upload(file, {
        headers: headers.value,
        action: action.value,
        data: data.value,
      }).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.error(err)
      })
    }

    return {
      headers,
      action,
      data,
      afterRead,
    }
  },
}
</script>

4. 配置七牛云上传凭证

// 获取七牛云上传凭证
const getUploadToken = () => {
  return new Promise((resolve, reject) => {
    // 调用七牛云的接口获取上传凭证
    axios.get('/api/qiniu/token').then((res) => {
      resolve(res.data)
    }).catch((err) => {
      reject(err)
    })
  })
}

5. 在 App.vue 中初始化七牛云上传凭证

// 在 App.vue 中初始化七牛云上传凭证
const initQiniu = () => {
  getUploadToken().then((res) => {
    headers.value = res.headers
    action.value = res.action
    data.value = res.data
  })
}

export default {
  created() {
    initQiniu()
  },
}