3.1其他跟laravel-admin文檔 配置差不多
3.2 然後新建組件類app/Admin/Extensions/WangEditor.php
。
關於WangEditor
設置部分請閱讀官方文檔
class WangEditor extends Field { protected $view = 'admin.wang-editor'; protected static $css = [ '/vendor/wangEditor-3.0.10/release/wangEditor.css', ]; protected static $js = [ '/vendor/wangEditor-3.0.10/release/wangEditor.min.js', ]; public function render() { $name = $this->formatName($this->column); $this->script = <<<EOT var E = window.wangEditor var editor = new E('#{$this->id}'); editor.customConfig.uploadFileName = 'my_image[]'; editor.customConfig.uploadImgHeaders = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() } editor.customConfig.zIndex = 0; // 上傳路徑 editor.customConfig.uploadImgServer = '/uploadFile'; editor.customConfig.onchange = function (html) { $('input[name=$name]').val(html); } editor.customConfig.uploadImgHooks = { customInsert: function (insertImg, result, editor) { if (typeof(result.length) != "undefined") { for (var i = 0; i <= result.length - 1; i++) { var j = i; var url = result[i].newFileName; insertImg(url); } toastr.success(result[j]['info']); } switch (result['ResultData']) { case 6: toastr.error("最多可以上傳4張圖片"); break; case 5: toastr.error("請選擇一個文件"); break; case 4: toastr.error("上傳失敗"); break; case 3: toastr.error(result['info']); break; case 2: toastr.error("文件類型不合法"); break; case 1: toastr.error(result['info']); break; } } } editor.create(); // var editor = new wangEditor('{$this->id}'); // editor.create(); EOT; return parent::render(); } }
3.3 完成WangEditor
圖片上傳
3.3.1 創建上傳路由routes/web.php
Route::post('/uploadFile', 'UploadsController@uploadImg');
3.3.2 創建上傳文件控制器UploadsController
php artisan make:controller UploadsController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadsController extends Controller
{
public function uploadImg(Request $request)
{
$file = $request->file("mypic");
// dd($file);
if (!empty($file)) {
foreach ($file as $key => $value) {
$len = $key;
}
if ($len > 25) {
return response()->json(['ResultData' => 6, 'info' => '最多可以上傳25張圖片']);
}
$m = 0;
$k = 0;
for ($i = 0; $i <= $len; $i++) {
// $n 表示第幾張圖片
$n = $i + 1;
if ($file[$i]->isValid()) {
if (in_array(strtolower($file[$i]->extension()), ['jpeg', 'jpg', 'gif', 'gpeg', 'png'])) {
$picname = $file[$i]->getClientOriginalName();//獲取上傳原文件名
$ext = $file[$i]->getClientOriginalExtension();//獲取上傳文件的後綴名
// 重命名
$filename = time() . str_random(6) . "." . $ext;
if ($file[$i]->move("uploads/images", $filename)) {
$newFileName = '/' . "uploads/images" . '/' . $filename;
$m = $m + 1;
// return response()->json(['ResultData' => 0, 'info' => '上傳成功', 'newFileName' => $newFileName ]);
} else {
$k = $k + 1;
// return response()->json(['ResultData' => 4, 'info' => '上傳失敗']);
}
$msg = $m . "張圖片上傳成功 " . $k . "張圖片上傳失敗<br>";
$return[] = ['ResultData' => 0, 'info' => $msg, 'newFileName' => $newFileName];
} else {
return response()->json(['ResultData' => 3, 'info' => '第' . $n . '張圖片後綴名不合法!<br/>' . '只支持jpeg/jpg/png/gif格式']);
}
} else {
return response()->json(['ResultData' => 1, 'info' => '第' . $n . '張圖片超過最大限制!<br/>' . '圖片最大支持2M']);
}
}
} else {
return response()->json(['ResultData' => 5, 'info' => '請選擇文件']);
}
return $return;
}
}
//-------------------------------------------以上是圖片上傳到本地的,下面纔是上傳到七牛雲的-------------------------
public function uploadImg(Request $request) { $file = $request->file("my_image"); if (!empty($file)) { foreach ($file as $key => $value) { $len = $key; } if ($len > 25) { return response()->json(['ResultData' => 6, 'info' => '最多可以上傳25張圖片']); } $m = 0; $k = 0; for ($i = 0; $i <= $len; $i++) { // $n 表示第幾張圖片 $n = $i + 1; if ($file[$i]->isValid()) { if (in_array(strtolower($file[$i]->extension()), ['jpeg', 'jpg', 'gif', 'gpeg', 'png'])) { $disk = Storage::disk('qiniu'); $time = 'images/'.date('Ymd'); $filename = $disk->put($time,$file[$i]); if ($filename) { $img_url = $disk->getDriver()->downloadUrl($filename); $m = $m + 1; } else { $k = $k + 1; } $msg = $m . "張圖片上傳成功 " . $k . "張圖片上傳失敗<br>"; $return[] = ['ResultData' => 0, 'info' => $msg, 'newFileName' => $img_url]; } else { return response()->json(['ResultData' => 3, 'info' => '第' . $n . '張圖片後綴名不合法!<br/>' . '只支持jpeg/jpg/png/gif格式']); } } else { return response()->json(['ResultData' => 1, 'info' => '第' . $n . '張圖片超過最大限制!<br/>' . '圖片最大支持2M']); } } } else { return response()->json(['ResultData' => 5, 'info' => '請選擇文件']); } return $return; }