简介

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

  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管理端手动修改存储桶策略

image

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

原文地址:https://www.haicheng.website/...


MakeFunny
16 声望4 粉丝

记录我的代码历程