使用 React Quill 使用 Java JPA 进行图像图标化

问：

我在使用 React Quill 编辑器时遇到了问题。

我当前的 React 代码如下所示。

  const imageHandler = async () => {

  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();

  input.addEventListener('change', async () => {
    const file = input.files[0];

    try {
      const formData = new FormData();
      formData.append('image', file);

      // Send an image upload request to the server and receive the image URL.
      const response = await axios.post('http://localhost:8090/images/upload', formData);
      const imageUrl = response.data.imageUrl;

      console.log("urlll", imageUrl)


      // 에디터에 이미지를 삽입합니다. 이미지 URL을 절대 경로로 설정합니다.
      const editor = contentRef.current.getEditor();
      const range = editor.getSelection();
      editor.insertEmbed(range.index, 'image', `${imageUrl}`);
      editor.setSelection(range.index + 1);
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  });
};



  const formats = [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'align',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'background',
    'color',
    'link',
    'image',
    'video',
    'width',
  ];


  const modules = useMemo(() => {
return {
  toolbar: {
    container: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ color: [] }, { background: [] }],
      [{ align: [] }],
      ['image', 'link' , 'video']
    ],
    handlers: {
      image: imageHandler,
    },
  },
};
}, []);

return(
  <ReactQuill
   ref = {contentRef}
   value={content}
   onChange={handleContentChange}
   modules={modules}
   formats={formats}
   placeholder={'write your board!'}
   theme="snow"
   />
);

后端代码是这样的。（Java JPA）

图像控制器

@RestController
@RequestMapping("/images")
public class ImageController {
@Autowired
private ImageUploadService imageUploadService;

@PostMapping("/upload")
    public ResponseEntity<Map<String, String>> uploadImage(@RequestParam("image") MultipartFile image) {
    try {
        // 이미지 업로드 및 이미지 URL 반환
        String imageUrl = imageUploadService.uploadImage(image);
        Map<String, String> response = new HashMap<>();
        response.put("imageUrl", imageUrl);
        return ResponseEntity.ok(response);
    } catch (IOException e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    }
}
}

图像服务

@Service
public class ImageUploadService {
@Value("${image.upload.directory}")
private String uploadDirectory; // 이미지 업로드 디렉토리 설정

public String uploadImage(MultipartFile image) throws IOException {
    // 이미지 업로드 처리
    String fileName = UUID.randomUUID().toString() + "-" + image.getOriginalFilename();
    String filePath = Paths.get(uploadDirectory, fileName).toString();
    Files.copy(image.getInputStream(), Paths.get(filePath), StandardCopyOption.REPLACE_EXISTING);

    // 이미지 URL 반환 ("/images/upload/파일명.jpg")
    return "/images/upload/" + fileName;
}
}

application.properties에는 파일 경로를 D드라이브에 폴더로 설정해줬습니다.

# 이미지 업로드 디렉토리 설정
image.upload.directory=D:/imagestest/upload

问题

1. 该文件保存在该上传目录中。

2. 我在日志中显示了 url 值，结果很好。

3. 但问题是图像在 ReactQuill 中无法正确显示，而是以图标格式显示。

4. 当我在使用 imageHolder 之前将图像上传到 ReactQuill 时，它被应用为 base64，并且图像显示正确。但是，在 imageHolder 和后端处理（将文件保存在服务器上并以 url 格式加载）后，它显示如下。 使用 base64 将帖子上传到服务器时，不会因为太长而上传。