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:WindowsphpB48F.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

最后

以上就是和谐银耳汤为你收集整理的wangEditor编辑器在laravel中上传图片（二）的全部内容，希望文章能够帮你解决wangEditor编辑器在laravel中上传图片（二）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。