简介
最近在写项目的时候,使用了富文本编辑器wangEditor,其中有一个功能是图片上传,因为之前已经有一个搭建好的MinIO服务且提供了Java SDK,在实现这个功能的时候也踩了一下坑,将该功能记录如下。
整合wangEditor
在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>
SpringBoot整合MinIO
- 加入MinIO依赖
<dependency>
<groupId>io.minio</groupId>
<artifactId>minio</artifactId>
<version>3.0.10</version>
</dependency>
- MinIO工具类
import io.minio.MinioClient;
import io.minio.errors.*;
import io.minio.policy.PolicyType;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.xmlpull.v1.XmlPullParserException;
import java.io.IOException;
import java.io.InputStream;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
@Slf4j
@Component
public class MinIoService {
@Value(value = "${minio.url}")
private String url;
@Value(value = "${minio.accessKey}")
private String accessKey;
@Value(value = "${minio.secretKey}")
private String secretKey;
/**
* 获取MinioClient
* @return
* @throws InvalidPortException
* @throws InvalidEndpointException
*/
private MinioClient minioClient() throws InvalidPortException, InvalidEndpointException {
return new MinioClient(url, accessKey, secretKey, true);
}
/**
* minio文件上传
*
* @param bucketName 存储桶
* @param fileName 文件名
* @param inputStream 输入流
* @param contentType 文件类型
* @param size 文件大小
* @return
* @throws InvalidPortException
* @throws InvalidEndpointException
* @throws IOException
* @throws InvalidKeyException
* @throws NoSuchAlgorithmException
* @throws InsufficientDataException
* @throws InvalidArgumentException
* @throws InternalException
* @throws NoResponseException
* @throws InvalidBucketNameException
* @throws XmlPullParserException
* @throws ErrorResponseException
* @throws RegionConflictException
* @throws InvalidObjectPrefixException
*/
public String uploadFile(String bucketName, String fileName, InputStream inputStream, String contentType, long size) throws InvalidPortException, InvalidEndpointException, IOException, InvalidKeyException, NoSuchAlgorithmException, InsufficientDataException, InvalidArgumentException, InternalException, NoResponseException, InvalidBucketNameException, XmlPullParserException, ErrorResponseException, RegionConflictException, InvalidObjectPrefixException {
MinioClient client = minioClient();
if (!client.bucketExists(bucketName)) {
client.makeBucket(bucketName);
// 设置存储桶策略
client.setBucketPolicy(bucketName, "*", PolicyType.READ_ONLY);
}
client.putObject(bucketName, fileName, inputStream, size, contentType);
return client.getObjectUrl(bucketName, fileName);
}
}
有多种方式可以实例化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);
}
}
遇到的问题
- 文件已上传到MinIO,但在编辑器中回显失败
原因:没有配置存储桶策略或存储桶策略配置错误
目前了解到有3种方式修改存储桶策略:
- 通过MinIO管理端手动修改存储桶策略
- 通过MinIO对应的客户端工具
mc
- 在创建存储桶时,指定策略
client.setBucketPolicy(bucketName, "*", PolicyType.READ_ONLY);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。