最近在写项目的时候,使用了富文本编辑器wangEditor,其中有一个功能是图片上传,因为之前已经有一个搭建好的MinIO服务且提供了Java SDK,在实现这个功能的时候也踩了一下坑,将该功能记录如下。
在Thymeleaf中整合wangEditor需要js文件,我使用的是CDN引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> <link href="https://cdn.staticfile.org/wangEditor/3.1.1/wangEditor.min.css" rel="stylesheet"/> </head> <body> <div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!--> <script src="https://cdn.staticfile.org/wangEditor/3.1.1/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#editor') // 字体 editor.customConfig.fontNames = [ '宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana', "JetBrains Mono" ], // 后端对应的字段 editor.customConfig.uploadFileName = 'file'; // 后端图片上传接口 editor.customConfig.uploadImgServer = '/resource/uploadResource', // 文件最大尺寸 editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024, // 文件上传数量 editor.customConfig.uploadImgMaxLength = 5, editor.customConfig.customAlert = function (info) { // info 是需要提示的内容 alert('自定义提示:' + info) } editor.create() </script> </body> </html>有多种方式可以实例化MinioClient,具体请参考API,由于之前搭建MinIO是通过Nginx代理并配置了HTTPS,所以secure参数设置为空true。
文件上传Controller @Slf4j @Controller @RequestMapping(value = "resource") public class ResourceController { @Autowired private ResourceService resourceService; @ResponseBody @PostMapping(value = "uploadResource") public Map<String, Object> uploadResource(@RequestParam(value = "file") MultipartFile file) { return resourceService.saveResource(file); } }原因:没有配置存储桶策略或存储桶策略配置错误
目前了解到有3种方式修改存储桶策略:
通过MinIO管理端手动修改存储桶策略 通过MinIO对应的客户端工具mc在创建存储桶时,指定策略 client.setBucketPolicy(bucketName, "*", PolicyType.READ_ONLY);原文地址:https://www.haicheng.website/passages/minio-upload-file/