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/65352371    return 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