简介

最近在写我的项目的时候，应用了富文本编辑器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

  1. 退出MinIO依赖
        <dependency>            <groupId>io.minio</groupId>            <artifactId>minio</artifactId>            <version>3.0.10</version>        </dependency>
  1. 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@Componentpublic 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。

  1. 文件上传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);    }}

遇到的问题

  1. 文件已上传到MinIO，但在编辑器中回显失败
起因：没有配置存储桶策略或存储桶策略配置谬误

目前理解到有3种形式批改存储桶策略：

  • 通过MinIO治理端手动批改存储桶策略

  • 通过MinIO对应的客户端工具mc
  • 在创立存储桶时，指定策略
client.setBucketPolicy(bucketName, "*", PolicyType.READ_ONLY);