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; }