SmartEditor를 이용한 이미지 업로드 구현

네이버의 SmartEditor를 이용한 이미지 업로드를 구현하겠습니다.

일단 네이버의 SmartEditor2.0 파일을 다운받아줍니다.
https://github.com/naver/smarteditor2
여기가 공식 깃헙 사이트 같은데 jindo 관련 js 파일 일부분이 없네요..
따로 저작권이나 문제생길까봐 올리진 않습니다

지금 하고자 하는 것은

여기 우측에 있는 사진 버튼을 통해 이미지를 올리고 본문에 보이는 과정이다.

일단 바꿔줘야 할 부분은 attach_photo.js 의 html5Upload() 함수이다.

여기서 sUploadURL 부분을 자신의 컨트롤러 매핑 URL로 변경한다.

또 바꿔줘야 할 부분은 attach_photo.js 의 CallAjaxForHTML5 함수이다.

기존의 jindo 코드를 활용하려고 했으나, 도저히 안되서 소스를 찾아보니 해당 소스를 발견했다.
해당 소스로 진행한다.

MultiPart Form으로 넘겨왔기 때문에 Controller에서 MultipartFile로 매핑을 해주어야한다.

 @RequestMapping(value="/singleImageUploader", method = RequestMethod.POST)
    public void smarteditorImageUpload2(MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws IOException {
        try{
            if(file.isEmpty()) {
                System.out.println("이미지 미등록");
            } else {
                String filePath = path;
                File saveDir = new File(filePath);
                if(!saveDir.exists()){
                    saveDir.mkdir();
                }
                SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
                String today = formatter.format(new java.util.Date());
                String rfileName = file.getOriginalFilename();
                String fileExt = file.getOriginalFilename().split("\\.")[1];
                String pFileName = file.getOriginalFilename().split("\\.")[0] + UUID.randomUUID() + "-" + today + "."+ fileExt;
                File saveFile = new File(saveDir, pFileName);
                try {
                    file.transferTo(saveFile);
                }catch(Exception e) {
                    e.printStackTrace();
                }
                String sFileInfo = "";
                sFileInfo += "&bNewLine=true";
                // img 태그의 title 속성을 원본파일명으로 적용시켜주기 위함
                sFileInfo += "&sFileName=" + rfileName;
                sFileInfo += "&sFileURL=" + "/imagePath/" +pFileName;
                PrintWriter print = response.getWriter();
                print.print(sFileInfo);
                print.flush();
                print.close();

            }


        } catch (Exception e) {
            e.printStackTrace();
        }
    }

한글인코딩은 아직 안했습니다.
여기 path는 제 서버 변수를 사용했습니다.

제 환경은 gradle 환경에 yml 파일 사용중이기에
application.yml에
upload:
path: 실제 경로
적고
Controller 상단에
@Value("${upload.path}")
private String path;
를 통해 접근했습니다.

만약 MultiPart 관련 타입을 찾을 수 없는 오류가 발생할 경우

설정 항목으로 Resolver를 등록한다.

@Configuration
public class MultipartConfig {
    @Value("${file.multipart.maxUploadSize:10485760}")
    private long maxUploadSize;

    @Value("${file.multipart.maxUpladSizePerFile:10485760}")
    private long maxUploadSizePerFile;

    @Bean
    public MultipartResolver multipartResolver() {
        StandardServletMultipartResolver multipartResolver = new StandardServletMultipartResolver();
        return multipartResolver;
    }
    @Bean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        factory.setMaxRequestSize(DataSize.ofBytes(maxUploadSize));
        factory.setMaxFileSize(DataSize.ofBytes(maxUploadSizePerFile));
        return factory.createMultipartConfig();
    }
}

이렇게 하면 파일 저장은 정상적으로 될텐데 이미지가 본문에 안 보여질 수 있다.
이유는 로컬 파일의 접근을 브라우저가 막기 때문이다.

따라서 해당 로컬 주소를 가상 주소로 변경하여 접근해야한다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    private String connectPath = "/imagePath/**";
    private String resourcePath = "자신의 파일이 실제로 저장되는 경로";
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(connectPath)
                .addResourceLocations(resourcePath);
    }
}

위의 컨트롤러 코드에서 쓰인 /imagePath 가 가상 경로이다.
이렇게 설정하면 resourcePath에 있는 경로가 connectPath로 연결된다.

저장로직은 따로 작성하셔야합니다
감사합니다