[84일차 - 2] CKEditor 내 이미지 업로드 작업 / 상품 이미지 등록 세팅

20221122(화)

• 목차
  - CKEditor 내 이미지 업로드 작업
  - 상품 이미지 등록 세팅

---

< CKEditor 내 이미지 업로드 작업 >

• 요청방식 post 확인 / name : upload 확인

 

서버로 전송 버튼 클릭했을 때 아래 빨간박스 주소로 전송되도록 만들어 놨다.

---

1. AdProduct 컨트롤러 코드추가

//CKEditor에서 사용하는 파일업로드. <input type = "file" name = "upload">
@PostMapping("/imageUpload")
public void imageUpload(HttpServletRequest req, HttpServletResponse res, MultipartFile upload) {

    OutputStream out = null;
    PrintWriter printWriter = null;

    res.setCharacterEncoding("utf-8");
    res.setContentType("text/html; charset=utf-8");

    try {
        String fileName = upload.getOriginalFilename();  // 클라이언트에서 보낸 원본파일이름.
        byte[] bytes = upload.getBytes(); 	// 업로드된 파일을 가르키는 byte 배열.

        // CKEditor를 통하여 업로드되는 서버측의 폴더
        String uploadPath = "C:/dorothydatabase/upload/ckeditor/" + fileName;

        // 1) 출력스트림을 이용하여, 업로드 작업을 진행함.
        out = new FileOutputStream(new File(uploadPath));
        out.write(bytes);
        out.flush();
        // out.close();

        // 2) 업로드된 파일정보를 CKEditor에게 보내는 작업. // ckeditor에서 사용할 경로
        printWriter = res.getWriter();
        String fileUrl = "/upload/" + fileName;

        // 파일정보를 json 포맷으로 준비해야 한다. " 큰따옴표를 내용으로 코딩 할 경우에는 \"로 사용
        // {"filename":"abc.gif", "uploaded":1, "url":"/upload/abc.gif"} CKEditor 4.x version에서 요구하는 json포맷
        printWriter.println("{\"filename\" : \"" + fileName + "\", \"uploaded\" : 1, \"url\" : \"" + fileUrl + "\"}");
        printWriter.flush();


    }catch(Exception ex) {
        ex.printStackTrace();
    }finally {
        if(out != null) {
            try {
                out.close();
            } catch(Exception ex) {
                ex.printStackTrace();
            }
        }
        if(printWriter != null) {
            printWriter.close();
        }
    }
}

---

2. pom.xml에 내용 추가하기

    ➡ 도로시는 서블릿을 활용한 1번 방법으로 진행

<!-- 스프링 파일업로드 -->
<!-- 
1) Servlet 3.0 Multipart Request : 파일업로드 라이브러리가 필요없다. 업로드 관련 기능을 내부적으로 지원한다. (개발)
    - standardServletMultipartResolver
    - servlet-context.xml :
        <bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver" />
    - web.xml
        <servlet>
            <multipart-config>
                <max-file-size>209715200</max-file-size>
                <max-request-size>209715200</max-request-size>
                <file-size-threshold>0</file-size-threshold>
            </multipart-config>
        </servlet>

2) Apache Commons FileUpload API : 파일업로드 라이브러리가 필요하다.
    - CommonsMultipartResolver
    - servlet-context.xml
        <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="10485760"/>
            <property name=“maxUploadSizePerFile" value="10485760”/>
            <property name="maxInMemorySize" value=“0"/>
        </bean>

    - pom.xml
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
 -->

---

첫번째 방법으로 진행

(1) servlet-context.xml

(2) web.xml에 코드추가

 

ex) 실행화면

 

✨ 업로드로 사용한 폴더 추가작업

      Servers > 톰캣 > server.xml

 

• 프로젝트 외부폴더 설정 및 추가된 모습 확인가능

 

ex) 실행화면

---

 

 

---

< 상품 이미지 등록 >

0. SQL 테이블생성

-- 4. 상품 테이블
CREATE TABLE PRODUCT_TBL(
    PDT_NUM             NUMBER                  CONSTRAINT PK_PRODUCT_NUM PRIMARY KEY,
    CATE_CODE           NUMBER                  NOT NULL,
    CATE_CODE_PRT       NUMBER                  NOT NULL,
    PDT_NAME            VARCHAR2(50)            NOT NULL,
    PDT_PRICE           NUMBER                  NOT NULL,
    PDT_DISCOUNT        NUMBER                  NOT NULL,
    PDT_COMPANY         VARCHAR2(30)            NOT NULL,
    PDT_DETAIL          VARCHAR2(4000)          NOT NULL,
    PDT_IMG_FOLDER      VARCHAR2(100)           NOT NULL,
    PDT_IMG             VARCHAR2(100)           NOT NULL,
    PDT_AMOUNT          NUMBER                  NOT NULL,
    PDT_BUY             CHAR(1) DEFAULT 'Y'     NOT NULL,
    PDT_DATE_SUB        DATE DEFAULT SYSDATE    NOT NULL,
    PDT_DATE_UP         DATE DEFAULT SYSDATE    NOT NULL
);

-- 상품테이블 시퀀스
CREATE SEQUENCE SEQ_PRODUCT_NUM;

1. ProductVO.java 

    14개 필드 + 파일업로드 필드

 

 

2. AdProductController.java

 

3. servlet-context.xml에 코드추가 ( bean 생성)

4. Controlelr에upload 폴더 주입

 

---

< 업로드 작업 - 1 >

 

1. com.docmall.util 패키지 생성 ➡ FileUtils.java 생성

날짜폴더 생성 및 운영체제 경로의 구분자에 맞게 리턴하는 작업

• File.separator는 운영체제별 각 환경에서 동작하도록 작업이된다.
• 내pc에서만 동작시킬 것이 아니다!!

 

2. FileUtils.java 코드 추가

package com.docmall.util;

import java.io.File;
import java.nio.file.Files;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

import org.springframework.web.multipart.MultipartFile;

// 컨트롤러에서 호출할 목적으로 생성.
public class FileUtils {
	//상품이미지파일에 대한 업로드작업
	/*
	 1.날짜폴더 생성해서 파일관리
	 2.Thumnail 이미지생성 : 이미지파일
	 3. 일반파일과 이미지파일 구분작업
	 4. byte[]배열로 다운로드. 
	 */
	
	//파일업로드 작업.   C:\\doccomsa\\upload\\goods\\2022\\11\\22
	public static String uploadFile(String uploadFolder, String uploadDateFolderPath, MultipartFile uploadFile) {
		
		String uploadFileName = ""; // 실제 업로드한 파일명.
		
		// File클래스 : 파일과 폴더 작업을 하는 목적
		
		// 폴더정보
		File uploadPath = new File(uploadFolder, uploadDateFolderPath);
		
		//폴더 존재여부
		if(uploadPath.exists() == false) {
			uploadPath.mkdirs();  //존재 하지않으면, 하위(자손)폴더까지 한번에 생성됨.
		}
		
		//클라이언트에서 업로드한 파일명.
		String uploadClientFileName = uploadFile.getOriginalFilename();
		
		//중복되지 않는 고유의 문자열 생성
		UUID uuid = UUID.randomUUID();
		
		//업로드시 중복되지 않는 파일이름을 생성
		uploadFileName = uuid.toString() + "_" + uploadClientFileName;
		
		try {
			// 파일정보
			File saveFile = new File(uploadPath, uploadFileName);
			uploadFile.transferTo(saveFile);  // 서버의 폴더에 파일복사.(업로드)
			
			//Thumnail 작업.
			
			
		}catch(Exception ex) {
			ex.printStackTrace();
		}
		
		return uploadFileName;
		
	}
	
	
	//날짜폴더 생성및 운영체제 경로의 구분자에 맞게 리턴.
	public static String getFolder() {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		
		Date date = new Date();
		
		String str = sdf.format(date); // "2022-11-22"
		
		//1)리눅스 또는 맥은 구분자 / : "2022-11-22" -> "2022/11/22"
		//2)윈도우즈 \ : "2022-11-22" -> "2022\11\22"
		
		return str.replace("-", File.separator);
	}
	
	// 일반파일 또는 이미지파일 구분
	private static boolean checkImageType(File saveFile) {
		
		boolean isImage = false;
		
		try {
			// MIME : text/html, text/plain, image/jpeg
			String contentType = Files.probeContentType(saveFile.toPath()); 
			
			isImage = contentType.startsWith("image");
		}catch(Exception ex) {
			ex.printStackTrace();
		}
		
		return isImage;
		
	}

}