圖片上傳(內置) · thinkphp5_layer_商城規格/屬性實戰

### 圖片上傳(內置) ##### 單圖上傳 <blockquote class="danger"><p>TP自帶內置上傳功能, 這個內置的上傳是表單提交之后直接上傳. 無需另寫上傳功能. 也就是沒有回調. 這樣有一個好處就是沒有多余的垃圾圖片傳到服務器內. 壞處就是沒有回調, 在提交表單之前無法進行預覽.</p> <p>由于TP內置圖片上傳, 無法使用ajax提交. 至少我沒有找到方法. ajax就不走enctype="multipart/form-data"上傳機制了. 所以內置上傳不想繞過他的特性. 那么就直接用普通上傳方式解決掉他.</p> <p>builder上傳圖片是通過ajax提交, 所以內置上傳無法在builder公用里面進行使用. 那么我們就要新建頁面處理他.builder上傳圖片, 請使用自定義上傳來搞定.</p></blockquote> * 自己新建一個html文件,注意form表單里面要加入enctype="multipart/form-data"用于區分是否上傳. * 我也不想新建, 直接用builder來生成最好. 但是用生成的無法通過ajax傳值到后臺. * 因為tp內置的上傳只有在點擊提交按鈕的時候才走上傳機制. 不然是無值的. * 沒有辦法, 我們就用創建的文件來搞這個事. * 那么以后就是, 第三方擴展上傳圖片(帶回調)使用builder生成. * 如果要是用TP內置的上傳, 那么就用創建文件, 通過submit點擊提交進行上傳. * 路徑application/admin/view/index_nternalimg.html ~~~ {extend name="base"} {block name="body"} <div class="tpl-content-wrapper"> <ol class="am-breadcrumb"> <span class="layui-breadcrumb" lay-separator="-"> <a href="">首頁</a> <a><cite>內置圖片上傳</cite></a> </span> </ol> <div class="tpl-portlet-components"> <div class="portlet-title"> <div class="caption font-green bold"> <span class="am-icon-code"></span> 內置圖片上傳測試 </div> </div> <div class="tpl-block "> <div class="am-g tpl-amazeui-form"> <div class="am-u-sm-12 am-u-md-9"> <form class="layui-form" action="" enctype="multipart/form-data" method="post"> <div class="layui-form-item"> <label class="layui-form-label">上傳</label> <div class=""> <input type="file" name="single_img" > </div> </div> <div class="layui-form-item item_password "> <label class="layui-form-label">text上傳</label> <div class="layui-input-block"> <input type="text" name="single_text" id="single_text" value="" required="" lay-verify="required" placeholder="請填寫text上傳" autocomplete="off" class="layui-input" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">多圖上傳1</label> <div class=""> <input type="file" name="figure[]" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">多圖上傳2</label> <div class=""> <input type="file" name="figure[]" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">多圖上傳3</label> <div class=""> <input type="file" name="figure[]" > </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit >立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <div id="demo4" style="float:right"></div> </div> </div> </div> </div> </div> </div> {/block} ~~~ * 路徑application/admin/controller/index.php * 前面注釋的是單圖直接上傳, 這樣的話無需處理圖片不改變板式直接上傳服務器內. * 沒有注釋的是圖片經過處理的. single_img是我封裝好的.拿來直接調用即可. 路徑已經標注. * HYQingKongTiJ.ttf 水印文字是百度下的. 同時TP官網給出的也是這個.因為那個1,2,3,4,5不支持中文. * 此處包含單圖上傳, 單圖處理后上傳, 多圖處理后上傳. * 圖片處理記得安裝插件 composer require topthink/think-image ~~~ public function NternalImg(){ if(IS_POST){ // 單圖直接上傳方法 // $file = request()->file('single_img'); // //如果在服務器內, 請給新建文件夾權限. 不然會出問題 // $info = $file->validate(['size'=>1567800000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'); // if($info){ // echo '/public/uploads/'.$info->getSaveName(); // }else{ // echo $file->getError(); // } // halt($this->param); // 單圖上傳處理方法 $single = ''; $file = request()->file('single_img'); if (true !== $this->validate(['image' => $file], ['image' => 'require|image'])) { //此處用json返回也可以. $this->error('請選擇圖像文件'); } else { //single_img放在application/admin/common.php $single = single_img(3,$file,'','','','','back'); } //多圖上傳處理辦法 $image = []; $figure = request()->file('figure'); foreach($figure as $file){ if (true !== $this->validate(['image' => $file], ['image' => 'require|image'])) { //此處用json返回也可以. $this->error('請選擇圖像文件'); } else { $image[] = single_img(3,$file,'','','','','back'); } } echo $single; halt($image); } else { return $this->fetch(); } } ~~~ * 路徑application/admin/common.php * 我將圖片上傳處理的方法封裝在這里. 用于圖片處理使用 * $saveName = request()->time().rand_string(6,1) . '.png'; 我在time之后加了一個隨機串, 這樣多圖上傳的時候不會沖突 ~~~ use think\Image; use think\Request; /** * [single_img description] * @param integer $type [類型, 默認為圖片裁剪] * @param string $file [圖片地址,上傳來的圖片地址.] * @param integer $width [寬度,裁剪跟縮略圖使用一個] * @param integer $height [高度,裁剪跟縮略圖使用一個] * @param string $watermark [水印圖片地址,默認為我設置的圖片] * @param string $word [文字水印的內容.] * @param string $url [圖片存放路徑,由于參數無法放函數.所以我用一個判斷進行執行. 這個是7的問題.暫時不研究] * @return [type] [description] */ function single_img($type=1,$file='',$width=300,$height=300,$watermark='./public/common/img/logo.png',$word='www.bcahz.com',$url=''){ if($file){ if($url == ''){ $url = date("Ymd"); } // 讀取圖片 $image = Image::open($file); // 圖片處理 switch ($type) { case 1: // 圖片裁剪 $image->crop($width, $height); break; case 2: // 縮略圖 $image->thumb($width, $height, Image::THUMB_CENTER); break; case 3: // 垂直翻轉 $image->flip(); break; case 4: // 水平翻轉 $image->flip(Image::FLIP_Y); break; case 5: // 圖片旋轉 $image->rotate(); break; case 6: // 圖片水印 $image->water($watermark, Image::WATER_NORTHWEST, 50); break; case 7: // 文字水印 $image->text($word, VENDOR_PATH . 'topthink/think-captcha/assets/ttfs/HYQingKongTiJ.ttf', 20, '#refeee'); break; } // 保存圖片（以當前時間戳） // /public/uploads/ 可以用config.get()進行設置, 這樣的話, 不管oss或者本地圖片路徑都可以解決. $saveName = request()->time().rand_string(6,1) . '.png'; $image->save(ROOT_PATH . '/public/uploads/'.$url.'/' . $saveName); } else { return false; } return '/public/uploads/'.$url.'/' . $saveName; } ~~~