使用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>

有疑問就請留下你的腳步👣