thinkphp 用七牛雲異步上傳文件(前後端代碼)

1、首先創建一個七牛雲帳號,完成後,添加對象存儲

2、創建成功後,右上角“密鑰管理 查看祕鑰,找到AK、SK;

3、打開thinkphp的配置文件,將此代碼加入

'CONFIG_QINIU' => 
array (
    'accessKey' => '你的AK',
    'secretKey' => '你的SK',
    'domain' => '融合CDN域名',
    'bucket' => '存儲文件的空間名稱',
  ),

4、HTML頁面代碼

<tr style="height: 100px;">
              <th width="70">封面視頻 </th>
              <td>
              	
				<button type="button" class="layui-btn" id="cover">
				     <i class="layui-icon">&#xe67c;</i>視頻上傳
				</button>&nbsp;&nbsp;
				<input type="text"  name="cover_file_name" value="" readonly="readonly" style="height: 30px; line-height: 30px;" />
				<input type="hidden" name="cover_file_url" value="" />
				&nbsp;&nbsp;
				<button type="button" οnclick="cancel_1();" class="layui-btn layui-btn-warm">視頻取消</button>
				<div>
					windows:僅允許上傳 mp4視頻,視頻編碼H264,文件大小不超過 6M。
			    </div>
									
			 </td>
</tr>

HTML 頁面截圖

5、上傳文件JS代碼

<!--- 封面視頻  --->
<script type="text/javascript">
	
	  layui.use('upload', function(){
	  var upload = layui.upload;
	  //執行實例
	  var uploadInst = upload.render({
		    elem: '#cover', //綁定元素
		    exts: 'mp4',  // 允許上傳的文件後綴
		    size: 1024*6,  // 文件大小,單位KB
		    accept: 'file', //普通文件
		    url: "{:U('AdminPage/uploadFile')}", //上傳接口
		    choose: function(obj){
		    	// 選擇文件回調
		    	var is_save = $('input[ name = cover_file_url]').val();
		    	if(is_save == ''){
		    		layer.load();
		    	}else{
		    		layer.msg('已存在視頻,請先刪除當前視頻');
		    		return false;
		    	}
		    },
		    done: function(res){
		      //上傳完畢回調
		      setTimeout(function(){
					  layer.closeAll('loading');
					}, 100);
		      if(res.success){
		      	 layer.alert(res.success, {icon: 6});
		         $('input[name = cover_file_name]').val(res.file_name);
		         $('input[name = cover_file_url]').val(res.file_url);
		         return false;
		      }else{
		      	layer.alert(res.error, {icon: 5});
		        return false;
		      }
		    }
	  });
	});

// 封面視頻上傳取消
	function cancel_1(){
		
  	   $('input[name = cover_file_name]').val('');
       $('input[name = cover_file_url]').val('');
       layer.msg('封面視頻已取消');
       return false;
		  
	}

</script>

6、下載七牛雲SDK包,更名爲:Qiniu,並放在此處

7、後臺控制 器代碼

public function uploadFile(){
		
		vendor("Qiniu.autoload");
		$Qiniu_config = C(CONFIG_QINIU);

		$auth = new \Qiniu\Auth($Qiniu_config['accessKey'], $Qiniu_config['secretKey']);
		// 生成上傳Token
		$token = $auth->uploadToken($Qiniu_config['bucket']);
		
		if(!empty($_FILES)){
			$uploadMgr = new \Qiniu\Storage\UploadManager();
			$filePath = $_FILES['file']['tmp_name'];             //獲取上傳的圖片、文件
			$fileName = date('YmdHis').'-'.mt_rand(0,9).'.mp4';  //自定義保存在七牛的文件名
			$fileUrl = $Qiniu_config['domain'].'/'.$fileName;
			list($ret,$err) = $uploadMgr->putFile($token,$fileName,$filePath);
			echo json_encode(array('success'=>'上傳成功','file_url'=>'http://'.$fileUrl,'file_name'=>$fileName));
	    	exit;
	    }else{
	    	echo json_encode(array('error'=>'未上傳文件視頻'));
	    	exit;
	    }
        
	}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章