webUploader大文件分片上传

webUploader配置：

主要是开启chunked:true,其他配置见官网：http://fex.baidu.com/webuploader/doc/index.html

前端代码

var Up ={
       File:function(){
          var $list = $('#picker');
              $list.before('<div class="pickerTs" style="position: absolute;right: -130px;top: -15px;"></div>') 
          var GUID = WebUploader.Base.guid();
          var uploader = WebUploader.create({
              auto: true,
              // swf地址
              swf:'//partner.iplaystone.com/static/libs/css/Uploader.swf',

              // 服务器上传接口地址
              server: '/api/video-upload/index',

             //picker按钮
              pick: '#picker',
              resize: false,
              chunked: true,   //开启分片上传
              chunkSize: 2*1024*1024,   //分片大小
              threads: 1,
              formData: {guid: GUID},   //guid：任务号
              fileSingleSizeLimit:30*1024*1024  //文件大小限制
          });

          uploader.on( 'fileQueued', function( file ) {
              $('.pickerTs').html( '<div id="' + file.id + '" class="item">' +
                  '<h4 class="videoname ls" style="width: 200px;height: 30px;overflow: hidden;">' + file.name + '</h4>' +
                  '<p class="state ls">'+msg[lang].ts4+'</p>' +
              '</div>' );
          });

          uploader.on( 'uploadProgress', function( file, percentage ) {
             ...
          });


          uploader.on( 'uploadSuccess', function(file,response) {
            ...
          });
          
          uploader.on("error",function (file){ 
              ...
           });


          uploader.on( 'uploadError', function( file ) {
              ...
          });

          uploader.on( 'uploadComplete', function( file ) {
              ...
          });
       }
    }
    Up.File();

后端代码

class VideoUploadController extends Controller
{
    public $returnMsg = [
        'zh' => [
            'guid_empty_error' => ['code' => 1000, 'msg' => 'GUID 不可以为空'],
        ],
        'en' => [
            'guid_empty_error' => ['code' => 1000, 'msg' => 'Guid can not be empty'],
        ],
    ];
    public function actionIndex()
    {
        if (Yii::$app->request->isPost) {
            $guid = Yii::$app->request->post('guid');
            if(empty($guid)){
                return $this->returnMsg['guid_empty_error'];
            }
            $size = Yii::$app->request->post('size');
            $chunk = Yii::$app->request->post('chunk', 0);
            $chunks = Yii::$app->request->post('chunks', 1);
            $file = current($_FILES);
            rename($file['tmp_name'], $this->tempFile($guid, $chunk));
            // 未判断并发上传
            if ($chunk == $chunks - 1) {
                $full = $this->tempFile($guid);
                $fp = fopen($full, 'wb');
                for ($i = 0; $i < $chunks; $i++) {
                    $content = file_get_contents($this->tempFile($guid, $i));
                    fwrite($fp, $content);
                }
                fclose($fp);
                $ossFile = 'videos/' . md5_file($full) . '.mp4';
                /* @var \app\components\AliyunOss $aliyunOss */
                $aliyunOss = Yii::$app->get('oss_video');
                $aliyunOss->uploadFile($ossFile, $full);
                $data = [
                    'code' => 1,
                    'message' => 'success',
                    'url' => $aliyunOss->baseUrl . $ossFile,
                ];
                return $data;
            }
        }
    }

    private function tempFile($guid, $chunk = null)
    {
        $tempFile = Yii::getAlias('@webroot/../runtime/' . $guid);
        if (is_null($chunk)) {
            $tempFile .= '.mp4';
        } else {
            $tempFile .= '.chunk' . $chunk;
        }
        return $tempFile;
    }
}