使用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方法来获取实时的进度，我们直接贴上代码，具体实现的思想就在代码里了。

有疑问就请留下你的脚步