使用Element-UI框架的upload组件直传视频至七牛云（代码教程）

前言：七牛云是一个不错的云服务提供商，尤其是其对象存储和cdn是有一定的免费额度，对于小众开发者来说还是很划算的。为了更好的用户体验和上传速度，决定通过七牛云存储来上传视频文件。

 前情图示：

                                       图片来源：使用Element UI框架（基于vue2.0）的upload组件上传图片至七牛云

一、找到你七牛云存储的区域的客户端url

七牛云存储的区域表格(客户端)

存储区域	区域简称	上传域名
华东	z0	http(s)://upload.qiniup.com
华北	z1	http(s)://upload-z1.qiniup.com
华南	z2	http(s)://upload-z2.qiniup.com

文档参考：七牛云存储直传文件

二、 提供一个服务端接口：七牛上传token接口

笔者使用php框架Laravel来提供接口服务，由于本身就已经使用了七牛扩展包overtrue/laravel-filesystem-qiniu。大同小异，随便选择一个七牛云扩展也是可以完成此接口（基本是继承七牛云的SDK再造轮子）。

代码：

// 第一步，引入七牛Auth类
use Qiniu\Auth;
// 第二步，实例话七牛Auth类
// config是Laravel框架自带获取配置参数的函数。其他框架或者语言请自行填写
// config('filesystems.qiniu.access_key')是取配置文件中的access_key参数
// config('filesystems.qiniu.secret_key')是取配置文件中的secret_key参数
// config('filesystems.qiniu.bucket')是取配置文件中的bucket参数
$auth = new Auth(config('filesystems.qiniu.access_key'),env('filesystems.qiniu.secret_key'));
        
return response()->json([
      'token' => $auth->uploadToken(config('filesystems.qiniu.bucket'))
]);

// 这里建议如果使用cdn加速，以及其他一些参数可以在这个接口返回必须的字段。如返回 

response()->json([
      'action' => 'http://upload-z2.qiniup.com', // 七牛云存储客户端直传域名
      'cdn'    => 'https://cdn.xxxx.com', // cdn域名
      'token'  => $auth->uploadToken(config('filesystems.qiniu.bucket'))
]);

三、前端代码模块

我们应该自定义一个方法来实现。根据官方文档，要覆盖默认的行为，要绑定http-request。这里使用了el-progress来展示进度条，通过axios的onUploadProgress方法来获取实时的进度，我们直接贴上代码，具体实现的思想就在代码里了。

<template>
    <div>
        <el-form>
            <el-form-item label="添加视频：">
                <el-radio-group v-model="model.other.origin">
                    <el-radio :label="0">上传视频</el-radio>
                    <el-radio :label="1">引用视频</el-radio>
                </el-radio-group>
                <!-- 上传视频的页面模块 -->
                <el-progress v-if="model.other.origin == 0 && progressPercent != 0 && progressPercent < 100"
                             style="width: 320px;"
                             :percentage="progressPercent">
                </el-progress>
                <el-upload
                        v-if="model.other.origin == 0"
                        v-loading="loading"
                        :disabled="uploadDisabled"
                        :element-loading-text="loadingText"
                        element-loading-spinner="el-icon-loading"
                        element-loading-custom-class="loading-style"
                        :action="qiNiuAction"
                        :http-request="sliderRequest"
                        :show-file-list="false"
                        :on-success="handleVideoSuccess"
                        :on-error="handleVideoError"
                        :before-upload="beforeVideoUpload"
                        drag
                >
                    <video v-if="model.other.video_url_0 !=''"
                           :poster="这里是视频封面的url"
                           :src="model.other.video_url_0"
                           class="avatar video-avatar"
                           style="width: 320px;height:180px"
                           controls="controls">
                        您的浏览器不支持视频播放
                    </video>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text" v-if="!uploadDisabled">将文件拖到处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" v-if="!uploadDisabled" slot="tip">只能上传视频文件，且不超过200M</div>
                </el-upload>
                <el-button
                        v-if="model.other.origin == 0 && uploadDisabled && model.other.video_url_0 !=''"
                        type="warning"
                        @click="reloadUpload"
                >重新上传
                </el-button>
                <!-- 引用视频的页面模块 -->
                <el-input
                        v-if="model.other.origin == 1"
                        placeholder="请输入引用的视频url"
                        v-model="model.other.video_url_1"
                        clearable>
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        uploadDisabled: false,
        loading: false,
        qiNiuCdn: '',
        qiNiuAction: '',
        qiNiuUploadData: {
          key: '',
          token: '',
        },
        progressPercent: 0,
        loadingText: '拼命加载中',
        getQiniuTokenIng: false,
        model: {
          other: {
            origin: 0,
            video_url_0: '',
            video_url_1: ''
          }
        }
      }
    },
    methods: {
      getQiniuToken(type, name) {
        return new Promise((resolve, reject) => {
          if (!this.getQiniuTokenIng) {
            this.getQiniuTokenIng = true
            this.loading = true
            this.loadingText = 'token加载中'
            axios.get(`/qiniu/getUploadParam?type=${type}&name=${name}`).then((res) => {
              if (res.data.status == 200) {
                this.qiNiuUploadData.token = res.data.token
                this.qiNiuUploadData.key = res.data.key
                this.qiNiuCdn = res.data.cdn
                this.qiNiuAction = res.data.action
                this.getQiniuTokenIng = false
                resolve()
              } else {
                this.$message({
                  message: res.data.desc,
                  duration: 2000,
                  type: "warning"
                });
                this.getQiniuTokenIng = false
                reject()
              }
            }).catch(e => {
              reject()
            })
          }
        })
      },
      beforeVideoUpload: function (file) {
        const isLt200M = file.size / 1024 / 1024 < 200;
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
          this.$message.error("请上传支持的数据格式（mp4，flv，avi，wmv，rmvb，mov）");
          return false;
        }
        if (!isLt200M) {
          this.$message.error("图片大小不能超过 200MB!");
          return false;
        }
      },
      // 自定义el-upload方法
      sliderRequest(upload) {
        this.getQiniuToken(upload.file.type, upload.file.name).then((res) => {
          const formData = new FormData() // 创建FormData对象
          // 添加相关上传参数
          formData.append('file', upload.file)
          formData.append('key', this.qiNiuUploadData.key) // key 文件名处理，这样的话七牛会识别文件时什么类型
          formData.append('token', this.qiNiuUploadData.token)
          // onUploadProgress 查看axios文档 https://github.com/axios/axios
          axios.post(this.qiNiuAction, formData, {
            onUploadProgress: (event) => {
              this.loadingText = '疯狂下载中'
              this.progressPercent = parseInt(event.loaded / event.total * 100) // loaded:已上传文件大小 total:被上传文件的总大小
              // 监听上传进度
              event.percent = event.loaded / event.total * 100
              upload.onProgress(event)
            }
          }).then((response) => {
            this.loading = false
            if (response.status === 200) {
              const res = response.data
              this.handleVideoSuccess(res);
            }
          }).catch((err) => {
            this.loading = false
            this.handleVideoError();// 调用组件上传失败方法
          })
        })
      },
      handleVideoSuccess: function (res) {
        const videoUrl = this.qiNiuCdn + '/' + res.key;
        this.model.other.video_url_0 = videoUrl
        this.uploadDisabled = true
      },
      handleVideoError: function (res) {
        this.$message({
          message: "上传失败",
          duration: 2000,
          type: "warning"
        });
      },
      reloadUpload() {
        this.uploadDisabled = false
        this.model.other.video_url_0 = ''
      }
    }
  }
</script>
<style>
    .loading-style {
        width: 320px;
        height: 180px
    }

    .el-upload-dragger {
        width: 320px !important;
        height: 180px !important;
    }
</style>

有疑问就请留下你的脚步👣