wangeditor编辑器怎么实现多图上传
前端代码:
<div id="editor">
</div>
<script src="/static/wangEditor.min.js"></script>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.config.uploadFileName = 'img[]';//自定义fileName
editor.config.uploadImgServer = "/index.php/index/index/wangeditor" ; // 上传图片到服务器
//editor.customConfig.uploadFileName = 'img[]';//老版本的写法
//editor.customConfig.uploadImgServer = "/index.php/index/index/wangeditor" ; //老版本的写法
editor.create();
</script>
</div>
<script src="/static/wangEditor.min.js"></script>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.config.uploadFileName = 'img[]';//自定义fileName
editor.config.uploadImgServer = "/index.php/index/index/wangeditor" ; // 上传图片到服务器
//editor.customConfig.uploadFileName = 'img[]';//老版本的写法
//editor.customConfig.uploadImgServer = "/index.php/index/index/wangeditor" ; //老版本的写法
editor.create();
</script>
后端用的是thinkphp框架
后端代码:
public function wangeditor()
{
$files = request()->file('img');
$images = [];
$errors = [];
foreach($files as $file){
// 移动到/uploads/ 目录下
$info = $file->move('uploads');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
//echo $info->getExtension();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
//echo $info->getFilename();
$path = '/uploads/'.$info->getSaveName();
$images[] = $path;
}else{
// 上传失败获取错误信息
//echo $file->getError();
$errors[] = $file->getError();
}
}
if(!$errors){
$msg['errno'] = 0;
$msg['data'] = $images;
return json($msg);
}else{
$msg['errno'] = 1;
$msg['data'] = $images;
$msg['msg'] = "上传出错";
return json($msg);
}
}
{
$files = request()->file('img');
$images = [];
$errors = [];
foreach($files as $file){
// 移动到/uploads/ 目录下
$info = $file->move('uploads');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
//echo $info->getExtension();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
//echo $info->getFilename();
$path = '/uploads/'.$info->getSaveName();
$images[] = $path;
}else{
// 上传失败获取错误信息
//echo $file->getError();
$errors[] = $file->getError();
}
}
if(!$errors){
$msg['errno'] = 0;
$msg['data'] = $images;
return json($msg);
}else{
$msg['errno'] = 1;
$msg['data'] = $images;
$msg['msg'] = "上传出错";
return json($msg);
}
}
wangeditor多图上传要注意一点,uploadFileName要设置成数组形式,否则后台只能接收到一张图片
editor.config.uploadFileName = 'img[]';
//editor.customConfig.uploadFileName = 'img[]';//老版本的写法
//editor.customConfig.uploadFileName = 'img[]';//老版本的写法
后台通过相应的uploadFileName值来接收
当然前端也可以不设置uploadFileName,后台直接通过$files = request()->file();来获取所有上传的图片