Question

我在我的网站上使用CKEditor WYSWIG作为我的文本编辑器。当用户在编辑器上粘贴图像时，它会以<img src="data:image/png;base64,iVBORw0KGgoAAAANsd..." />

的形式发送

我想获取此base64字符串，将其保存在数据库中，然后创建类似/image/{id}的端点，这将显示此图像，因此在帖子中我不必放置整个base64图像源中的字符串，但只是如上所示的URL。

这就是我将base64保存为byte[]的方式：

@RequestMapping(value = {"/main/createpost"}, method = RequestMethod.POST)
    public String postPost(Model model, Principal principal,@RequestParam(name="editor-content") String postPayload) throws IOException {


        postPayload = checkAndSavePhotos(postPayload);
        model.addAttribute("editor",postPayload);
        return "createpost";
    }

checkAndSavePhotos正在检查编辑器是否包含任何图像，如果是，则将其存储在数据库中：

private String checkAndSavePhotos(String postPayload) throws IOException {
        int i =1;
        Pattern pattern = Pattern.compile(".*<img src=\".*;base64,(.*?)\".*/>");

        Matcher matcher = pattern.matcher(postPayload);
        while (matcher.find()) {
            PostPhoto postPhoto = new PostPhoto();
            byte[] bytes = Base64.getDecoder().decode(matcher.group(i).getBytes());
            MultipartFile mf =null;
            try {
                BufferedImage originalImage = ImageIO.read(new ByteArrayInputStream(bytes));
                ByteArrayOutputStream baos = new ByteArrayOutputStream();
                ImageIO.write(originalImage, "png", baos);
                baos.flush();
                mf = new MockMultipartFile("test", baos.toByteArray());
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            postPhoto.setContent(mf.getBytes());
            postPhoto = postPhotoService.save(postPhoto);
        }

        return null;
    }

我已经这样做了，因为当我使用<input type='file' />时使用FileBucket的其他表单，我就足以显示fileBucket.getFile().getBytes();以显示图片。我试图从MultipartFile创建byte[]并以同样的方式创建。

我的终点显示图片：

@RequestMapping(value = "/main/postphoto/{imageId}")
    @ResponseBody
    public byte[] getImage(@PathVariable Long imageId) throws IOException  {
        PostPhoto image = postPhotoService.findById(imageId);

        return image.getContent();
    }

现在，当我查看数据库content列时，如下所示： \x89504e470d0a1a0a0000000d49484452000000280000002808060000008cfeb86d0000033f4944415478daed9(...)

来自filebucket的文件 \377\330\377\341\000\030Exif\000\000II*\000\010\000\000\000\000\000\000\000\000\000\000\000\377\354\000\021Ducky\000\001\000\004\000\000\000A\000\000\377\341\003ohttp://ns.adobe.com/xap/1.0/\000<?xpacket begin="\357\273\277" id="W5M0MpCehiHzreSzNTczkc9d"?> (...)

任何人都可以给我一个如何使其有效的提示吗？

Answer 1

看起来这是一个愚蠢的错误。

我的数据库列content的类型为text，因此我将byte[]存储为文本，因此浏览器无法正确解码文件并不奇怪。

将数据库列类型更改为bytea解决了问题。

spring mvc display base64 as image

1 个答案: