SpringMVC 配置 simditor 上传图片到七牛云

simditor 是我目前用过最喜欢的富文本编辑器,其中上传图片也是十分棒的,支持立即预览和设置图片大小。

simditor 官网地址:点此

先看效果图(点击放大,动态图)

SpringMVC 配置 simditor 上传图片到七牛云

 

上传图片到七牛云,请直接参考之前写的文章:https://liuyanzhao.com/7937.html

其中上传链接替换,可以看这篇文章,点此

 

这里主要贴控制器里的代码

UploadController.java

  1. @Controller
  2. public class UploadController {
  3.     private final Logger logger = LoggerFactory.getLogger(this.getClass());
  4.     @Autowired
  5.     private QiNiuService qiNiuService;
  6.     @Autowired
  7.     private QiNiuProperties qiNiuProperties;
  8.     @PostMapping("/upload")
  9.     @ResponseBody
  10.     public Map<String, String> uploadToQiNiu(@RequestParam(value="upload_file", required=false) MultipartFile file) throws IOException {
  11.         Map<String, String> map = new HashMap<String, String>();
  12.         //1、后缀过滤,只支持 jpg,jpeg,png,bmp,gif
  13.         String filename = file.getOriginalFilename();
  14.         String suffix = (filename.substring(filename.lastIndexOf("."))).toLowerCase();
  15.         if (!".jpg".equals(suffix) && !".png".equals(suffix) && !".jpeg".equals(suffix) && !".gif".equals(suffix) && !".bmp".equals(suffix)) {
  16.             map.put("success""false");
  17.             map.put("msg""文件格式不允许");
  18.         }
  19.         //2、文件大小过滤
  20.         if (file.getSize() > 2 * 1024 * 1024) {
  21.             map.put("success""false");
  22.             map.put("msg""文件太大,请选择小于2MB的图片");
  23.         }
  24.         String url = "";
  25.         //3、开始上传
  26.         InputStream inputStream = file.getInputStream();
  27.         try {
  28.             com.qiniu.http.Response response = qiNiuService.uploadFile(inputStream);
  29.             DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
  30.             url = qiNiuProperties.getCdnPrefix() + putRet.key;
  31.         } catch (QiniuException e) {
  32.             logger.error("七牛云接口错误");
  33.             map.put("success""false");
  34.             map.put("msg""七牛云接口错误");
  35.         }
  36.         map.put("success""true");
  37.         map.put("msg""成功");
  38.         //返回图片地址
  39.         map.put("file_path",url);
  40.         return map;
  41.     }
  42. }

这里只需要注意 JSON 格式就行,至于你用什么上传方法都不重要,你可以上传到本地,然后通过静态资源映射来访问图片,也可以像我这里上传到七牛云,直接返回图片路径。

{
  "success": true/false,
  "msg": "error message", # optional
  "file_path": "[real file path]"
}

 

JS

  1.     toolbar = ['title', 'bold', 'mark', 'italic', 'underline', 'strikethrough', 'fontScale',
  2.         'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
  3.         'link', 'image', 'hr', '|', 'indent', 'outdent', 'html'];
  4.     var editor = new Simditor({
  5.         textarea: $('#editor'),
  6.         height: 600,
  7.         pasteImage: true,
  8.         toolbar: toolbar,  //工具栏
  9.         upload : {
  10.             url : "/upload"//文件上传的接口地址
  11. //            params: {xx:xx}, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
  12.             fileKey: 'upload_file', //服务器端获取文件数据的参数名
  13.             connectionCount: 3,
  14.             leaveConfirm: '正在上传文件'
  15.         }
  16.     });

 

本文地址:https://liuyanzhao.com/7987.html

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

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

目前评论:1   其中:访客  1   博主  0

    • avatar 牧马童自媒体

      七牛云对网站有什么用?