wangEditor编辑器在laravel中上传图片（二）

这里接着上篇，上篇是关于wangEditor的简单实用。这篇主要是上传图片。

一、wangEditor上传图片的一些配置

博主这里使用的是laravel5.1框架，大家根据自己的框架调整就好。

1、上传图片的参数

 var E = window.wangEditor;var editor1 = new E('#info1');  // 两个参数也可以传入 elem 对象，class 选择器//这里注意，下面的/news/upload是我的路由部分，主要是上传图片的后端代码editor1.customConfig.uploadImgServer = '/news/upload' ; // 上传图片到服务器//定义上传的filename，即上传图片的名称editor1.customConfig.uploadFileName = 'images';editor1.customConfig.showLinkImg = false;//开启wangEditor的错误提示，有利于我们更快的找到出错的地方editor1.customConfig.debug=true;editor1.create();

具体参考官方文档：https://www.kancloud.cn/wangfupeng/wangeditor2/113992

2、首先需要确认，点击上传图片之后，能够成功的进入你后端的方法。

二、后台部分

1、如果成功进入后台代码之后，先打印看看传过来的都是什么数据

var_dump($_FILES);exit;

浏览器显示：

array(1) {["images"]=>array(5) {["name"]=>string(5) "1.png"["type"]=>string(9) "image/png"["tmp_name"]=>string(22) "C:\Windows\phpB48F.tmp"["error"]=>int(0)["size"]=>int(13941)}
}

通过这段代码，我们可以知道，传过来的$_FILES是个数组。数组的第一项’images’就是我们上面设定的上传图片的名称。tmp_name是图片的临时存储路径。

2、laravel把图片上传到阿里OSS服务器上，并且返回图片路径

  public function upload(Request $request){//获取临时存储路径$file = $_FILES["images"]["tmp_name"];//这里做个判断if (isset($_REQUEST["name"])) {$fileName = $_REQUEST["name"];} elseif (!empty($_FILES)) {$fileName = $_FILES["images"]["name"];}//给filename的名称加点料，更复杂一些$fileName = iconv('UTF-8', 'GB2312', $fileName);$content = date('Y-m-d-H-i-s') . '-' . uniqid() . '.' . $fileName;//开启缓冲区。我这里开启缓冲区是因为阿里OSS图片上传，会强制性的返回一个'creatBucket:ok',这个东西对上传图片有一定的影响的，具体看下面解释。所以这边利用缓冲区给屏蔽掉ob_start();//这里是阿里OSS对象存储$bucket = Config::OSS_TEST_BUCKET;$accessKeyId = Config::OSS_ACCESS_ID;$accessKeySecret = Config::OSS_ACCESS_KEY;$endpoint = Config::OSS_ENDPOINT;$ossClient = Common::getOssClient();$object = "news/" . $content;$filePath = $file;//请记住，这个filepath是指向图片的路径，也是临时存储的路径$result = $ossClient->UploadFile($bucket, $object, $filePath);if (!$result) {exit("上传图片失败");}ob_clean();ob_end_flush();//这里拼接返回的格式$ret = [];$data[] =  $result['info']['url'];$ret['errno'] = 0;$ret['data'] = $data;//请参考这里https://zhidao.baidu.com/question/535380282.html//关于返回值的格式：https://www.zhihu.com/question/65352371return json_encode($ret,JSON_UNESCAPED_SLASHES);}

解释：
（1）首先是获取图片的临时存储路径，这也是上传图片必须的，不然我们怎么把图片上传到服务器呢。

（2）开启缓冲区是为了保证这段代码最后的返回值只有wangEditor想要的返回值，这样上传图片才能成功。一旦有任何其他的返回值，上传图片就会不成功。这里划重点

关于缓冲区的用法：http://blog.csdn.net/LJFPHP/article/details/78839654

（3）关于阿里的OSS对象存储，大家有兴趣的话，可以参考我的另一篇博客：
http://blog.csdn.net/ljfphp/article/details/76407850
上传成功之后，我们可以拿到网络图片的路径：

（4）需要特别注意，wangEditor编辑器，对于返回值是很偏执的。必须按照它的格式来。这个部分浪费我很多时间，格式必须是：

//拼接出的JSON要类似于：
//这个errno:0是必须的，这样编辑器才会认为你上传成功
//图片路径部分是为了能在编辑器上显示
{"errno":0,"data":["/可读取你图片的路径.jpg"]}

（5）因为我们的图片路径少不了会有斜杠。这里返回的时候需要注意。傲娇的wangEditor是不会允许有任何反斜杠的存在的。我们在json格式化的时候，一定要注意。

防止json格式化时候转义：http://blog.csdn.net/LJFPHP/article/details/78839763

三、上传成功之后，我们的图片就会显示出来了

1、编辑器显示图片
如图：

2、数据库存储html标签代码

OK，这里就大功告成了。

四、总结下主要注意的问题

1、上传的图片名称最好不要是中文的。这个会有影响的，反正我这边上传中文名称的图片就会报错。

2、后台返回的时候，只能按照格式返回。其他的返回值一定要消除。楼主这里是借用缓冲区来消除其他返回值的。

3、json格式化的时候，注意不要把斜杠给转义了。

可能我这边写的也不够好，大家有意见可以提出来，一起学习。

end