yii 上传视频（ajax）

Posted 2022-08-22 bneglect

实现一个功能：提交表单的时候，需要上传视频，把视频上传到oss上，然后把url作为表单值传到后端保存到数据库。需要ajax异步实现。

1. 页面表单

   <form class="auto-form" method="post" id="art_form" action="<?= \Yii::$app->urlManager->createAbsoluteUrl([‘mch/course/coursedir/add‘]);?>">

   <div class="form-group row">
        <div class="form-group-label col-sm-2 text-right">
            <label class="col-form-label required">上传完整视频</label>
        </div>
        <div class="col-sm-6">
             <input type="file" name="video" value=""/>
             <input type="text" name="video_url" value=""/>
             <img id="video" src="" alt="325×325" style="width:325px;height:325px;">
        </div>
   </div>
   
   //这是表单的一部分，要注意的是需要在<form  id="art_form">code...</form>添加一个ID属性值，配合formData（）

    

2. ajax 发送数据（使用jquery）

   //上传视频, 这个url在yii里的写法是 index.php?r=moduleID/controllerID/actionID (写完整路径报错)
       url = ‘index.php?r=mch/course/coursedir/upload-video‘;
       var video = $(‘input[name="video"]‘);var csrf = $(‘input[name="_csrf"]‘).val();     //csrf 不传也没有报错，好像是不传也可以（不知道会不会有安全隐患，表单里是传了csrf的）这里没用
       video.click(function () 
           video.change(function () 
               var obj = this;
               var formData = new FormData($(‘#art_form‘)[0]);     //ajax 上传文件的时候，需要使用formData（），不要丢掉下标0
               $.ajax(
                   type: ‘post‘,
                   url: url+‘&fileName=video‘,    //fileName 参数是后端处理文件需要使用的
                   data: formData,      // 数据
                   //dataType: ‘json‘,
                   processData: false,
                   contentType: false,   //设置为false
                   success: function (data) 
                       if(data.status == 0)
                           //success
                           $(‘input[name="video_url"]‘).val(data.url);
                           $(‘#video‘).attr(‘src‘, data.url);
                           $(obj).off(‘change‘);
                       else
                           //fail
                       
                   ,
                   error: function (err) 
   
                   
               )
           )
       )

    

3. 服务器端处理文件并上传到oss里

   /**
        * 上传视频到oss，ajax返回视频url给页面
        * ajax传的fileName 
        *  注意： 上传视频和上传图片不同， 需要修改php.ini文件里的upload_max_filesize  和 post_max_filesize 参数，默认好像只有几M ，肯定是不够的
        */
       public function actionUploadVideo($fileName, $arr = [‘video/mp4‘], $fileSize=10000000)
       
           //判断文件是否合法
           $file = $_FILES[$fileName];
           if($file[‘error‘]>0)
               switch($file[‘error‘])
                   case 1:
                   case 2:
                       return ‘文件过大‘;
                   case 3:
                       return ‘上传文件不完整，请重新上传‘;
                   case 4:
                       return ‘请选择文件‘;
                   case 6:
                       return ‘tmp不存在‘;
                   case 7:
                       return ‘没有权限‘;
                   case 8:
                       return ‘........‘;
               
           
           if(!in_array($file[‘type‘], $arr))
               return ‘上传文件类型不合法‘;
           
           if($file[‘size‘]>$fileSize)
               return ‘上传文件过大‘;
           
           $suffix = strrchr($file[‘name‘], ‘.‘);
           $localdir = $file[‘tmp_name‘];       // 直接上传到oss 就不需要把文件从临时目录移动到服务器的目录里，直接从临时目录上传到oss 即可
           //引入ossSDK
           include \Yii::$app->basePath.‘/extensions/aliyun-oss-php-sdk-2.2.4/autoload.php‘;
           //把视频上传到oss上
           try
               $access_key = ‘LTAI9c666666‘;
               $secret_key = ‘f3zkCC666666‘;
               $domain = ‘http://oss-cn-shenzhen.aliyuncs.com‘;
               $bucket = ‘qa-xingzuo‘;
               $object = md5(time().uniqid()).$suffix;  //文件名，要先获取上传的文件后缀
               $ossClient = new OssClient($access_key, $secret_key, $domain);
               $exist = $ossClient->doesObjectExist($bucket, $object);   //判断oss上是否已经存在要上传的文件
               //$ossClient->deleteObject($bucket, $object);  exit;//删除文件
               if(!$exist)
                   $ossClient->uploadFile($bucket, $object, $localdir);
               
               //unlink($localdir); //删除本地文件, 后期可以优化一下
               $domain = explode(‘//‘, $domain);
               $url = ‘http://‘.$bucket.‘.‘.$domain[1].‘/‘.$object; //拼接访问路径，oss固定的访问格式
               $data = [
                   ‘status‘ => 0,
                   ‘msg‘ => ‘success‘,
                   ‘url‘ => $url,
               ];
               return $data;
            catch(OssException $e) 
               printf(__FUNCTION__ . ": FAILED\n");
               printf($e->getMessage() . "\n");
               return;