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

言曌 2018年04月13日22:28:14 6 3178 views

博主分享免费Java教学视频，B站账号：Java刘哥，长期提供技术问题解决、项目定制：本站商品点此

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

simditor 官网地址：点此

先看效果图（点击放大，动态图）

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

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

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

UploadController.java

@Controller
public class UploadController {
private final Logger logger = LoggerFactory.getLogger(this.getClass());
@Autowired
private QiNiuService qiNiuService;
@Autowired
private QiNiuProperties qiNiuProperties;
@PostMapping("/upload")
@ResponseBody
public Map<String, String> uploadToQiNiu(@RequestParam(value="upload_file", required=false) MultipartFile file) throws IOException {
Map<String, String> map = new HashMap<String, String>();
//1、后缀过滤，只支持 jpg,jpeg,png,bmp,gif
String filename = file.getOriginalFilename();
String suffix = (filename.substring(filename.lastIndexOf("."))).toLowerCase();
if (!".jpg".equals(suffix) && !".png".equals(suffix) && !".jpeg".equals(suffix) && !".gif".equals(suffix) && !".bmp".equals(suffix)) {
map.put("success", "false");
map.put("msg", "文件格式不允许");
}
//2、文件大小过滤
if (file.getSize() > 2 * 1024 * 1024) {
map.put("success", "false");
map.put("msg", "文件太大，请选择小于2MB的图片");
}
String url = "";
//3、开始上传
InputStream inputStream = file.getInputStream();
try {
com.qiniu.http.Response response = qiNiuService.uploadFile(inputStream);
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
url = qiNiuProperties.getCdnPrefix() + putRet.key;
} catch (QiniuException e) {
logger.error("七牛云接口错误");
map.put("success", "false");
map.put("msg", "七牛云接口错误");
}
map.put("success", "true");
map.put("msg", "成功");
//返回图片地址
map.put("file_path",url);
return map;
}
}

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

{

  "success": true/false,

  "msg": "error message", # optional

  "file_path": "[real file path]"

}

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