php 前端/後端 base64傳輸
阿新 • • 發佈:2018-12-22
後臺程式碼解析
public function actionImg(){ $post = \Yii::$app->request->post(); if(!$post){ return json_encode(array('status'=>0,'msg'=>'資料為空')); } if(!$post['file']){ return json_encode(array('status'=>0,'msg'=>'引數錯誤')); } $file = preg_split("/(,|;)/",$post['file']); $base64Data = $file[2]; //檔案資訊 $arr2 = explode('/',$file[0]); //分割出圖片格式 $type = $arr2[1]; //檔案型別 $str = time().rand(10000,99999); //生成圖片名 $basePath = \Yii::$app->basePath; //yii 獲取專案根目錄 $fileName = $basePath.'\upload\img\\'.$str.'.'.$type; //拼接圖片名稱 $return = file_put_contents($fileName,base64_decode($base64Data)); //儲存圖片到伺服器 if($return){ $imgsuffix = strtolower(strstr($str, '.')); $imgname = 'photo/homework/'.time().rand(1000,9999).$imgsuffix.'.'.$type; //oss配置 $bucket = \Yii::$app->params['oss']['bucket']; $accessKeyId = \Yii::$app->params['oss']['accessKeyId']; $accessKeySecret = \Yii::$app->params['oss']['accessKeySecret']; $endpoint = \Yii::$app->params['oss']['endpoint']; //上傳至OSS $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint); try { //圖片上傳 $ossClient->uploadFile($bucket, $imgname, $fileName); } catch (OssException $e) { return \GuzzleHttp\json_encode(array('status'=>0,'msg'=>$e)); } return \GuzzleHttp\json_encode(array('status'=>1,'msg'=>'圖片上傳成功','data'=>array('imgurl'=>$imgname))); }else{ return json_encode(array('status'=>0,'msg'=>'檔案流解析錯誤')); } }
前端ajax 提交
<el-upload class="upload-demo" :action="uploadurl" :data="uploadData" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="imgBeforeUpload" multiple :limit="1" :on-exceed="handleExceed" > <el-button size="small" type="primary">點選上傳</el-button> <span slot="tip" class="el-upload__tip">只能上傳jpg/png檔案,且不超過2MB</span> </el-upload>
imgBeforeUpload(file){ const self = this var File; let reader = new FileReader() reader.readAsDataURL(file) //轉BASE64 reader.onload=function(e) { File = e.target.result AXIOS.post('/courseware/courseware/img', { file: File }) .then(res => { console.log(res) }) } return false }