썸네일 등록하기

드디어 반복작업(?) 을 끝내고 새로운 것을 할 수 있었다.

 

 

헤더, 이력서 등에 나올 증명사진 (썸네일) 을 등록해보자!

 

개인정보 수정과 동시에, 새로운 썸네일을 등록해주려 한다.

 

emp 정보에 등록된 썸네일이 없는 경우, 지정해둔 이미지를 보여주도록

삼항 연산자를 사용했다.

이제 이런 이미지가 뜨는 일이 없다!

if (!f.type.match("image.*"))

"image" 문자열로 시작하는지를 확인

let f = obj.files[0];

.files 를 배열로 받아, [0] (첫번째 파일 선택.) 배열로만 받을 수 있나보다..

 reader.readAsDataURL(f)

File 객체나 Blob 객체 등의 파일 형식을 읽어와서 해당 파일의 데이터를 Base64 인코딩된 데이터 URL 형태로 반환

메서드 호출시, 파일을 비동기적으로 읽는다.

readAsDataURL() 메서드를 사용해서 읽어들인 이미지를 <img> 태그의 src 속성에 할당하면, 웹 페이지에서 이미지를 미리보기할 수 있다.

reader.onload

객체에서 파일 읽기 작업이 끝난 후 실행되는 콜백 함수

---

function updateById(id) {
        let data = {
            employeePassword: $("#employeePassword").val(),
            employeeEmail: $("#employeeEmail").val(),
            employeeBirth: $("#employeeBirth").val(),
            employeeTel: $("#employeeTel").val(),
            employeeAddress: $("#employeeAddress").val()
        };
        console.log(data.employeeBirth);
        $.ajax({
            type: "put",
            url: "/employee/" + id,
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json" // default : 응답의 mime 타입으로 유추함
        }).done((res) => { // 20X 일때
            alert(res.msg);
            location.href = "/employee/" + id + "/updateForm";
        }).fail((err) => { // 40X, 50X 일때
            alert(err.responseJSON.msg);
        });
    }

기존 update 코드에서는, JSON.stringify(data) 타입의 데이터를 모두 따로 받았지만,

 

 function updateById(id) {

        let profileForm = $("#profileForm")[0];
        let formData = new FormData(profileForm);
        $.ajax({
          type: "put",
          url: "/employee/update",
          data: formData,
          contentType: false, // 필수 : x-www-form-urlencoded로 파싱되는 것을 방지
          processData: false, // 필수: contentType을 false로 줬을 때 QueryString 자동 설정됨. 해제
          enctype: "multipart/form-data",
          dataType: "json" // default : 응답의 mime 타입으로 유추함
        }).done((res) => { // 20X 일때
          alert(res.msg);
          location.href = "/employee/updateForm";
        }).fail((err) => { // 40X, 50X 일때
          alert(err.responseJSON.msg);
        });
      }

 

JSON.stringify(data) 타입과 formDate 타입을 함께 받아오기 위해,

상단에 폼 태그를 사용해, 모든 정보를 'profileForm' 에 한번에 담았다.

---

 

package shop.mtcoding.rodongin.util;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class HtmlParser {

    public static String getThumbnail(String html) {
        String thumbnail;
        Document doc = Jsoup.parse(html);
        Elements els = doc.select("img");

        if (els.size() == 0) {
            thumbnail = "/images/kakao.jpg";
        } else {
            Element el = els.get(0);
            thumbnail = el.attr("src");
        }
        return thumbnail;
    }
}

주어진 HTML 코드에서 첫번째 이미지 태그의 src 속성값을 반환하는 기능

1. HTML 문자열을 Jsoup 라이브러리를 사용하여 Document 객체로 파싱
2. HTML 코드 내의 모든 이미지 태그를 선택하기 위해 doc.select("img")를 사용 (Elements 로 반환)
3. 태그의 개수가 0인 경우, 디폴트 이미지를 지정하기 위해 thumbnail 변수를 "/images/kakao.jpg"로 초기화
4. els.get(0)를 사용하여 첫번째 이미지 태그를 가져옴
5. 이미지 태그의 src 속성값을 el.attr("src")를 사용하여 추출하고, thumbnail 변수에 저장

package shop.mtcoding.rodongin.util;

import org.springframework.http.HttpStatus;
import org.springframework.web.multipart.MultipartFile;
import shop.mtcoding.rodongin.handler.ex.CustomException;

import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.UUID;

public class PathUtil {

    private static String getStaticFolder(){
        return System.getProperty("user.dir") + "\\src\\main\\resources\\static\\";
    }

    public static String writeImageFile(MultipartFile profile){
        UUID uuid = UUID.randomUUID();
        String uuidImageRealName = "images\\"+uuid+"_"+profile.getOriginalFilename();

        String staticFolder = getStaticFolder();
        Path imageFilePath = Paths.get(staticFolder+"\\"+uuidImageRealName);
        try {
            Files.write(imageFilePath, profile.getBytes());
        }catch (Exception e){
            throw new CustomException("사진을 웹서버에 저장하지 못하였습니다.", HttpStatus.INTERNAL_SERVER_ERROR);
        }
        return "/images/"+uuid+"_"+profile.getOriginalFilename();
    }
}

 

System.getProperty("user.dir")

현재 작업 디렉토리(current working directory)를 문자열로 반환하는 자바 시스템 프로퍼티 메서드

 UUID uuid = UUID.randomUUID();

Universally Unique Identifier"의 약자로, 범용 고유 식별자를 나타내는 클래스입니다. UUID 클래스는 자바에서 고유한 식별자를 생성하기 위해 사용

데이터베이스의 레코드 ID, 파일 이름, 네트워크 프로토콜에서 메시지 ID 등 다양한 용도로 사용

ex) 파일을 업로드할 때 파일 이름 대신 UUID를 사용하여 파일을 고유하게 식별

 

멀티파터 이미지를 파싱, 고유 식별을 위한 uuid 를 사용하는 메서드를

서비스에서 적용.

---

Controller

   @PutMapping("/employee/update")
    public @ResponseBody ResponseEntity<?> update(@ModelAttribute EmployeeUpdatdReq employeeUpdateReq,
            MultipartFile profile) {

        Employee principal = (Employee) session.getAttribute("principal");

        if (principal == null) {
            throw new CustomApiException("인증이 되지 않았습니다", HttpStatus.UNAUTHORIZED);
        }
        if (employeeUpdateReq.getEmployeePassword() == null ||
                employeeUpdateReq.getEmployeePassword().isEmpty()) {
            throw new CustomApiException("Password을 작성해주세요");
        }
        if (employeeUpdateReq.getEmployeeEmail() == null ||
                employeeUpdateReq.getEmployeeEmail().isEmpty()) {
            throw new CustomApiException("Email을 작성해주세요");
        }
        if (employeeUpdateReq.getEmployeeBirth() == null) {
            throw new CustomApiException("Birth을 작성해주세요");
        }
        if (employeeUpdateReq.getEmployeeTel() == null ||
                employeeUpdateReq.getEmployeeTel().isEmpty()) {
            throw new CustomApiException("Tel을 작성해주세요");
        }
        if (employeeUpdateReq.getEmployeeAddress() == null ||
                employeeUpdateReq.getEmployeeAddress().isEmpty()) {
            throw new CustomApiException("Address을 작성해주세요");
        }

        if (profile.isEmpty() || profile == null) {

        }

        Employee principall = employeeService.회원정보수정(principal.getId(), employeeUpdateReq, profile);
        session.setAttribute("principal", principall);

        return new ResponseEntity<>(new ResponseDto<>(1, "회원정보 수정 완료!", null), HttpStatus.OK);
    }

세션에 변경된 principal 정보를 담아주는걸 잊지말쟈ㅑ

 

나머진 그냥 update 에 추가해준다.

파일 선택과 함께 비동기적으로 이미지가 바뀌었고,

수정 버튼을 누르면,,

헤더 부분 이미지가 바뀐것을 확인 할 수있다.