Froala编辑器图片上传-Java图像服务器上传（无法回显问题）

前言

最近Froala编辑器图片上传，正常上传图片返回后oss的url在编辑器无法回显

一、Froala图片上传-怎么运行的

初始化编辑器时指定上传选项 插入图像时，编辑器会自动向服务器发出 AJAX 请求。
一旦请求到达服务器，它就会存储图像并将上传图像的链接发送回客户端。

初始化编辑器

首先，添加该imageUploadURL选项，其值输入图像的上传目的地。

接下来，设置任何其他选项来配置上传方法和允许的文件类型：imageUploadParam、imageUploadParams、imageUploadMethod、imageMaxSize、imageAllowedTypes。

<script>
   new FroalaEditor( '.selector' , {
     // 设置图片上传 URL 
    imageUploadURL: '/upload_image'
  })
< /script>

接收上传的图片并存储

服务器实现负责接收请求并适当处理它。在Java中，

返回上传图片的路径

如果保存成功，SDK会生成一个ImageResponse对象，其中包含上传图片的绝对路径，并且服务器将该路径返回给客户端。

String jsonResponseData = new Gson().toJson(responseData);
response.setContentType( “application/json” );
response.setCharacterEncoding( "UTF-8" );
response.getWriter().write(jsonResponseData);

二、如何解决

完整示例

前端代码

<script>
   new FroalaEditor( '.selector' , {
     // 设置图片上传 URL 
    imageUploadURL: '/upload_image'
  })
< /script>

重点后台上传图片接口

   @PostMapping(value = "/upload_image", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public void uploadFile(@RequestParam("file") MultipartFile file, UploadOssDto dto, HttpServletResponse response) throws IOException {
        if (file == null || file.isEmpty() || file.getSize() == 0) {
            throw new ServerException("File does not exist");
        }
    
        String ossPath = OssUtil.upload(file, dto);
        if (StringUtils.isBlank(ossPath)) {
            throw new ServiceException(ResultCode.OSS_UPLOAD_ERROR);
        }
        Map<String, String> map = new HashMap<>();
        map.put("link", ossPath);
        Gson gson = new Gson();
        response.getWriter().write(gson.toJson(map));

注意：

返回内容是下面这个固定格式，否则编辑器无法回显

{ "link": "https://example.com/image.jpg"}

map.put(“link”, ossPath);

postman返回内容