wangeditor编辑器怎么实现多图上传

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>

后端用的是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);
        }
    }

wangeditor多图上传要注意一点,uploadFileName要设置成数组形式,否则后台只能接收到一张图片

editor.config.uploadFileName = 'img[]';
//editor.customConfig.uploadFileName = 'img[]';//老版本的写法

后台通过相应的uploadFileName值来接收

$files = request()->file('img');

当然前端也可以不设置uploadFileName,后台直接通过$files = request()->file();来获取所有上传的图片

$files = request()->file();

相关文章:
wangEditor富文本编辑器如何改成手机端自适应的
wangEditor增加源码模式,添加查看源码功能

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: