共计 3815 个字符，预计需要花费 10 分钟才能阅读完成。
简介
最近在写我的项目的时候，应用了富文本编辑器 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);
正文完
