七牛云 js上传视频

七牛云 js上传视频
vue的html代码

//引入js
<script src="../js/plugins/jquery-2.1.1.js"></script>
<script src="../js/qiniu/plupload.full.min.js"></script>
<script src="../js/qiniu/qiniu.js?t=3"></script>
<style>
#pickfiles {
        padding: 10px;
        background: #000;
        border-radius: 5px;
        color: #fff;
    }
    .progress {
        color: red;
        font-size: 22px;
        margin-top: 20px;
    }
</style>
 <div class="form-group">
        <label class="control-label col-xs-12 col-sm-1"><span class="required">*</span>视频:</label>
      <div class="col-xs-12 col-sm-7">
          <span id='pickfiles'>上传视频</span>
          <span class="progress">{{progress}}</span>
          <span> <a :href="qiniu_video_url" target="_blank" v-if="qiniu_video_url!=''">点击查看视频</a></span>
          <input type="hidden" name="video_url" :value="qiniu_video_url">
      </div>
    </div>

vue的js代码

 created:function(){
       //获取七牛云token和外部访问的URl
        this.getTokenMessage();
    },
     methods: {
        getTokenMessage(){
            var that=this;
            $.ajax({
                url: '/admin/qiniu/getToken',
                type: 'POST',
                data: {'_token':"{{ csrf_token() }}"},
                dataType : 'json',
                success: function (data) {
                    var obj = data;
                    console.log("~~~obj",obj);
                    // that.video_token=obj.data.uptoken;  //token
                    // that.video_upload_url=obj.data.domain; //外部访问url
                    that.initQiniu(obj.data.uptoken,obj.data.domain)
                }
            });
        },
        initQiniu (uptoken,domain){
            var that=this
            Qiniu.uploader({
                runtimes: 'html5,flash,html4',
                browse_button: 'pickfiles',
                // flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.1/Moxie.swf',
                flash_swf_url: 'Moxie.swf', //引入flash,相对路径
                chunk_size: '4mb',
                uptoken: uptoken,
                // uptoken_url: '',
                domain: domain,// bucket域名，下载资源时用到，必需
                get_new_uptoken: false,
                auto_start: true,
                max_retries: 3,
                filters: {
                    max_file_size: '100mb',
                    prevent_duplicates: false,
                    // Specify what files to browse for
                    mime_types: [
                        {title : '视频格式', extensions : 'mp4'} // 限定文件后缀上传格式上传
                    ]
                },
                init: {
                    'FilesAdded': (up, files) => {
                        console.log('文件就绪', files);
                    },
                    BeforeUpload: (up, file) => {
                        console.log('上传之前', file);
                    },
                    UploadProgress: (up, file) => {
                        console.log('上传中 file',file);
                        this.progress = file.percent + '%';
                    },
                    FileUploaded: (up, file, info) => {
                        // 每个文件上传成功后,处理相关的事情
                        // 其中 info 是文件上传成功后，服务端返回的json，形式如
                        // {
                        // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                        // "key": "gogopher.jpg"
                        // }
                          res=JSON.parse(info)
                        that.qiniu_video_url = domain +'/'+ res.key; //获取上传成功后的文件的Url
                        console.log('获取上传成功后的文件的Url',that.qiniu_video_url)

                    },
                    Error: (up, err, errTip) => {
                        console.log('上传失败', err);
                    },
                    Key: (up, file) => {}
                }
            });
        },
       }

php代码

//控制器文件
<?php
namespace app\admin\controller;
use app\common\controller\Backend;
use services\QiNiuService;
class  Qiniu extends Backend {
   public function getToken(){
      $data=QiNiuService::GetTokenUrl();
       return $this->result($data, 200, 'success');
   }

}

<?php
namespace services;
//引入七牛云的相关文件
use Qiniu\Auth as Auth;
use Qiniu\Storage\UploadManager;
use \think\facade\Config;
use think\Exception;
//七牛云上传
class QiNiuService {
    //得到七牛云token和访问url
    public static function GetTokenUrl(){
        // 需要填写你的 Access Key 和 Secret Key
        $accessKey = Config::get('qiniu.accessKey');
        $secretKey = Config::get('qiniu.secretKey');
        // 构建鉴权对象
        $auth = new Auth($accessKey, $secretKey);
        // 要上传的空间
        $bucket = Config::get('qiniu.bucket');
        $visit_domain=Config::get('qiniu.visit_domain');
        $token = $auth->uploadToken($bucket);
        return ['uptoken'=>$token,'domain'=>$visit_domain];
    }

}