vue实现视频上传功能

下面我会为你详细讲解vue实现视频上传功能的完整攻略。

环境配置

在开始实现之前，我们首先需要配置环境。需要安装 vue、axios、element-ui、qiniu-js 等库。

使用 npm 安装 vue-cli：

npm install -g vue-cli

创建一个 vue 项目：

vue init webpack vue-upload

安装必要的 npm 包：

cd vue-upload
npm install axios element-ui qiniu-js --save

UI 界面设计

为了实现视频上传功能，我们需要有一个 UI 界面来支持用户上传视频文件。我们可以使用 element-ui 来创建一个带有文件上传功能的组件。

<template>
  <el-upload
    class="upload"
    :action="uploadUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList">
    <el-button size="small" type="primary">上传文件</el-button>
  </el-upload>
</template>

<script>
import { ElUpload } from 'element-ui'

export default {
  components: {
    ElUpload
  },
  data() {
    return {
      uploadUrl: '',
      fileList: []
    }
  },
  methods: {
    handlePreview() {},
    handleRemove() {}
  }
}
</script>

<style scoped>
.upload {
  margin-bottom: 20px;
}
</style>

上传途中

使用 axios 来上传文件到服务器：

axios.post(uploadUrl, formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

formData 可以通过 input[type="file"] 元素获取：

<input type="file" @change="handleChange">

handleChange(event) {
  const file = event.target.files[0]

  const formData = new FormData()
  formData.append('file', file)

  this.uploadUrl = `https://<七牛域名>/${file.name}`
  this.fileList.push({name: file.name, url: this.uploadUrl})

  this.upload(formData)
}

在 upload 函数中使用 qiniu-js 库上传文件到七牛云：

upload(formData) {
  const config = {
    useCdnDomain: true,
    region: 'z2',
    uptoken: '<七牛个人中心的AK和SK颁发的上传凭证>',
    domain: '<七牛域名>'
  }
  const observable = qiniu.upload(formData.get('file'), null, config)
  const subscription = observable.subscribe(uploadObserver)
}

uploadObserver，也就是 qiniu-js 库的上传进度回调函数，可以当做参数传递给 subscribe 函数调用。

const uploadObserver = {
  next(res) {
    console.log(res.total.percent)
  },
  error(err) {
    console.error(err)
  },
  complete(res) {
    console.log(res)
  }
}