小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

SpringBoot+WangEditor实现图片上传到七牛云功能

发表于 1个月前   480次查看    1评论  3 赞
基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费,今天就教大家如何用SpringBoot+WangEditor实现图片上传到七牛云功能

前端:

//editor开始
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
// 配置服务器端地址
editor.customConfig.uploadImgServer = '/uploadImg' //图片处理controller
editor.customConfig.withCredentials = true
editor.customConfig.uploadFileName = 'ImageFile'
editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
        var url =result.data;
        insertImg(url);

        // result 必须是一个 JSON 格式字符串!!!否则报错
    }
}
editor.create()


后端:

//保存 wangeditor 中的图片到七牛云
@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
@ResponseBody
public Object uploadQiNiu(@RequestParam("ImageFile") MultipartFile ImageFile) throws Exception {
   String newFileName = null;
   if (ImageFile != null && !ImageFile.isEmpty()) {
      //上传封面到七牛云
      //配置七牛云密钥
      String ACCESS_KEY = "I6Xy1NMzcQMfj1QVunXQtim";
      String SECRET_KEY = "3TxlVRDK_-LMrNHACdgApe";
      //要上传的空间--
      String bucketname = "";
      //密钥配置
      Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
      //创建上传对象
      UploadManager uploadManager = new UploadManager(new Configuration());
      //创建随机名字
      String originalFilename = ImageFile.getOriginalFilename();
      //用日期进行分类
      Date dt = new Date();
      SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
      String temp_str = sdf.format(dt);
      newFileName = temp_str + "/" + UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
      System.out.println(newFileName);
      //调用put方法来进行上传
      Response res = uploadManager.put(ImageFile.getInputStream(), newFileName,
            auth.uploadToken(bucketname), null, null);
      //打印返回信息,200为上传成功
      System.out.println(res.statusCode);
   }
   //图片路径

   String url = "http://xxx.com/" + newFileName;
   Map<String, String> map = new HashMap<String, String>();
   map.put("data",url);//这里应该是项目路径
   return map;//将图片地址返回
}


3人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论1