[Spring JPA] 이미지 파일 여러개 업로드

https://intheham.tistory.com/98

[Spring JPA] 이미지 파일 1개 업로드

 

 

 

 

 

1. Entity에 업로드하고 싶은 이미지 개수만큼 멤버변수 추가 (이미지 경로 저장)

 

public class Store {
	@Id
	@SequenceGenerator(name="seq_gen", sequenceName="seq_shopping", allocationSize=1)
	@GeneratedValue(strategy=GenerationType.SEQUENCE, generator="seq_shopping")
	private int num;
	
	private String name;
	private String info;
	private int price;
	private int amount;
	
	@ManyToOne // 여러 상품을 한 판매자가 등록할 수 있음
	@JoinColumn(name="seller", nullable=false)
	@OnDelete(action = OnDeleteAction.CASCADE)
	private Shopmember seller; // 판매자
	
	@Column(nullable=true)
	private String img1; // 이미지 경로
	@Column(nullable=true)
	private String img2;
	@Column(nullable=true)
	private String img3; 
	@Column(nullable=true)
	private String img4; 
}

 

 

2. Dto에 MultipartFile[] 변수 선언

- entity 에는 텍스트(경로/파일명) 만 저장 ---> DB 갈거니까~

- Dto 에는 파일 객체까지 저장

-->  서버 내에서 정보 이동~

public class StoreDto {
	private int num;
	private String name;
	private String info;
	private int price;
	private int amount;
	private Shopmember seller;
    
	private String img1;
	private String img2;
	private String img3;
	private String img4;
    
	private MultipartFile[] f = new MultipartFile[4];
}

 

 

 

3. Service 에서 Entity 저장과 Dto 호출을 다르게 하기

Dto에만 MultipartFile이 있으니까~~~

(Entity -- Store / Dto -- StoreDto)

// 상품 등록 & 수정
// img1, img2, img3, img4를 제외한 정보만 추가. 수정에서 img 값들을 할당.
public int save(StoreDto dto) {
	Store s = dao.save(new Store(dto.getNum(), dto.getName(), dto.getInfo(), dto.getPrice(), dto.getAmount(), dto.getSeller(), 
    					dto.getImg1(), dto.getImg2(), dto.getImg3(), dto.getImg4()));
	return s.getNum();
}
	
// 상품 전체 검색
public ArrayList<StoreDto> getAll(){
	ArrayList<Store> list = (ArrayList<Store>) dao.findAll();
	ArrayList<StoreDto> list2 = new ArrayList<StoreDto>();
	for (Store s:list) { // list 길이만큼 반복하며 값을 하나씩 꺼내서 변수 s에 담음.
		list2.add(new StoreDto(s.getNum(), s.getName(), s.getInfo(), s.getPrice(), s.getAmount(), s.getSeller(), 
				s.getImg1(), s.getImg2(), s.getImg3(), s.getImg4(), 
				null)); // multipart는 db에 안넣을 거니까 Null.
	}
	return list2;
}

 

 

4. Controller

(1) add

<h3>상품등록</h3>
<form action="/shop/add" method="post" enctype="multipart/form-data">
<table border="1">
<tr><th>상품명</th><td><input type="text" name="name"></td></tr>
<tr><th>설명</th><td><textarea name="info" rows="5" cols="30"></textarea></td></tr>
<tr><th>가격</th><td><input type="number" name="price"></td></tr>
<tr><th>수량</th><td><input type="number" name="amount"></td></tr>
<tr><th>판매자</th><td><input type="text" name="seller" value="${sessionScope.loginId }" readonly></td></tr>
<tr><th>상품 이미지1</th><td><input type="file" name="f[0]"></td></tr>
<tr><th>상품 이미지2</th><td><input type="file" name="f[1]"></td></tr>
<tr><th>상품 이미지3</th><td><input type="file" name="f[2]"></td></tr>
<tr><th>상품 이미지4</th><td><input type="file" name="f[3]"></td></tr>
<tr><th>등록</th><td><input type="submit" value="등록"></td></tr>

private MultipartFile[] f = new MultipartFile[4];

파일을 input 할 때 name 을 Dto에 저장한 이름과 방번호로 지정해주어야 한다!!!

 

 

 

File dir = new File(path+num);
dir.mkdir();

--> 글번호로 디렉토리 생성

 

MultipartFile[] f = dto.getF();
String[] imgs = new String[4];

--> Dto의 MultipartFile[] 변수를 get으로 꺼내오고, 

--> Entity에 저장될 경로를 담을 배열을 생성한다.

 

 

MultipartFile x = f[i];
String fname = x.getOriginalFilename();

--> for문으로 배열의 각 방에 있는 MultipartFile 객체를 꺼내 파일명만 추출한다.

 

String newpath = path+num+"/"+fname;
File newfile = new File(newpath);
x.transferTo(newfile);
imgs[i] = newpath;

--> 이미지 파일의 저장경로로 File 객체를 생성한 뒤, MultipartFile 객체의 정보를 넣어준다.

( File -- 컴퓨터 디렉토리 파일 정보 / MultipartFile -- 서버에 올라온 파일 정보 )

--> Entity(DB)에 저장될 String 값을 넣어줌.

=> 여기서 DB에 파일 전체 경로를 저장할지, 아니면 파일명만 저장할지는 본인 선택.

==> 저장된 값에 따라 @GetMapping("/read_img") 에서 File 객체를 꺼내올 때 다르게 꺼내와야 한다.

imgs[i] = newpath;    -->    File f = new File(path + fname);
imgs[i] = fname;        -->    File f = new File(fname);

 

dto.setImg1(imgs[0]);
dto.setImg2(imgs[1]);
dto.setImg3(imgs[2]);
dto.setImg4(imgs[3]);
service.save(dto);

--> for 문을 통해 경로를 담은 imgs[] 를 Dto에 담아주고 추가 메서드를 실행한다.

 

 

// 상품등록 완료
@PostMapping("/add")
public String add(ModelMap map, StoreDto dto, HttpSession session) {
	String loginId = (String) session.getAttribute("loginId"); // 로그인한 id값 읽기
	int num = service.save(dto); // 상품 추가(name, info, price, amount, seller)
	// 상품이 추가될 때 상품 번호 자동으로 생김(시퀀스).  그 번호를 반환.
		
	// 이미지 업로드할 경로 추가 
	File dir = new File(path+num);
	dir.mkdir(); // /Users/~~/Desktop/img/shop/num 인 디렉토리 생성 => 상품 이미지 폴더 
	MultipartFile[] f = dto.getF();
	String[] imgs = new String[4];
	for (int i = 0; i < f.length; i++) {
		MultipartFile x = f[i];
		String fname = x.getOriginalFilename();
		if (fname != null && fname.equals("")) {
			String newpath = path+num+"/"+fname;
			File newfile = new File(newpath); // 복사할 새 파일 생성 /Users/choeyeeun/Desktop/img/shop/num/fname
			try {
				x.transferTo(newfile);//파일 업로드 
				imgs[i] = newpath;
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	dto.setImg1(imgs[0]);
	dto.setImg2(imgs[1]);
	dto.setImg3(imgs[2]);
	dto.setImg4(imgs[3]);
	dto.setNum(num);
	service.save(dto); // 방금 추가한 상품 수정
	return "redirect:/shop/getbyseller?seller="+loginId;
}
	
@GetMapping("/read_img")
public ResponseEntity<byte[]> read_img(String fname){
	File f = new File(fname);
	HttpHeaders header = new HttpHeaders(); //HttpHeaders 객체 생성
	ResponseEntity<byte[]> result = null; //선언
	try {
		header.add("Content-Type", Files.probeContentType(f.toPath()));//응답 데이터의 종류를 설정
		result = new ResponseEntity<byte[]>(FileCopyUtils.copyToByteArray(f), header, HttpStatus.OK);
		} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return result;
}

 

 

(2) 이미지 1개 edit & delete

- 이미지별로 수정/삭제 버튼을 만들었음

- 수정할 이미지 밑에 있는 수정 버튼을 누르고 Choose File 로 바꿀 이미지를 선택 

--> 이미지 수정 버튼을 누르면 DB로 이동 (하나씩 DB 다녀와서 이미지만 수정함)

<script type="text/javascript">
	$(document).ready(function() {
		$(".e").click(function(){
			let id = $(this).attr("id");
			let num = id.substring(2);
			$('#imgnum').attr("value", num);
		});
		$(".d").click(function(){
			let id = $(this).attr("id");
			let num = id.substring(2);
			location.href="/shop/delimg?num=${dto.num }&imgnum="+num;
		});
	});
</script>
</head>
<body>
<c:if test="${not empty dto.img1}">
	<img src="/shop/read_img?fname=${dto.img1}">
</c:if>
<c:if test="${empty dto.img1}">
	이미지 없음
</c:if>

<input type="button" class="e" id="eb1" value="수정">
<input type="button" class="d" id="db1" value="삭제">

<div id="imgf">
	<form action="/shop/editimg" method="post" enctype="multipart/form-data">
		<input type="file" name="f1">
		<input type="hidden" name="num" value="${dto.num }">
		<input type="hidden" name="imgnum" id="imgnum">
		<input type="submit" value="이미지 수정">
		<input type="button" value="취소" id="cancel">
	</form>
</div>
</body>

 

(2-1) edit

String delf = ""; // 삭제할 파일 경로
switch (imgnum) {
case 1:
	delf = dto.getImg1(); // 기존파일을 삭제경로에 담기 
	dto.setImg1(newpath); // 새 파일 경로로 변수값 변경 
	break;
}
if (delf != null) { // 삭제경로 값이 있을 때에만
	File delFile = new File(delf); // 그 경로에 있는 파일 객체 가져오기 
	delFile.delete();
}
service.save(dto);

--> add 와 진행 방식이 거의 같음.

--> 기존 파일 경로에 있는 파일을 삭제하고 새로 변경한 이미지를 넣어줌!

 

(2-2) delete

String delf = "";
switch (imgnum) {
case 1:
	delf = dto.getImg1();
	dto.setImg1(null);
	break;
}
if (delf != null) {
	File delFile = new File(delf);
	delFile.delete();
}
service.save(dto);

--> Dto에 새 경로 대신 null을 넣고 기존 경로 파일은 삭제함.

 

 

// 이미지 하나 수정
@PostMapping("/editimg")
public String editimg(int num, MultipartFile f1, int imgnum) {
	StoreDto dto = service.getShop(num);
	String fname = f1.getOriginalFilename();
	String newpath = "";
	if (fname != null && !fname.equals("")) {
		newpath = path + num + "/" + fname;
		File newfile = new File(newpath);// 복사할 새 파일 생성. c:/shop/번호/원본파일명
		try {
			f1.transferTo(newfile);// 파일 업로드
			String delf = ""; // 삭제할 파일 경로
			switch (imgnum) {
			case 1:
				delf = dto.getImg1(); // 기존파일을 삭제경로에 담기 
				dto.setImg1(newpath); // 새 파일 경로로 변수값 변경 
				break;
			case 2:
				delf = dto.getImg2();
				dto.setImg2(newpath);
				break;
			case 3:
				delf = dto.getImg3();
				dto.setImg3(newpath);
				break;
			case 4:
				delf = dto.getImg4();
				dto.setImg4(newpath);
				break;
			}
			if (delf != null) {
				File delFile = new File(delf); // 그 경로에 있는 파일 객체 가져오기 
				delFile.delete();
			}
			service.save(dto);
		} catch (IllegalStateException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	return "redirect:/shop/edit?num=" + num;
}
	
// 이미지 하나 삭제 
@GetMapping("/delimg")
public String delimg(int num, int imgnum) {
	StoreDto dto = service.getShop(num);
	String delf = "";
	switch (imgnum) {
	case 1:
		delf = dto.getImg1();
		dto.setImg1(null);
		break;
	case 2:
		delf = dto.getImg2();
		dto.setImg2(null);
		break;
	case 3:
		delf = dto.getImg3();
		dto.setImg3(null);
		break;
	case 4:
		delf = dto.getImg4();
		dto.setImg4(null);
		break;
	}
	if (delf != null) {
		File delFile = new File(delf);
		delFile.delete();
	}
	service.save(dto);
	return "redirect:/shop/edit?num=" + num;
}

 

 

(3) delete (이미지 전부 삭제)

// 게시글 삭제
@GetMapping("/del")
public String del(int num, HttpSession session) {
	String loginId = (String) session.getAttribute("loginId");
	String delPath = path + num + "/";
	File dir = new File(delPath);
	File[] files = dir.listFiles(); // 디렉토리 안 파일들을 파일객체로 생성해서 줌.
	for(File f: files) { // 상품 이미지들 삭제
		f.delete();
	}
	dir.delete(); // 디렉토리 삭제
	service.delShop(num); // db에서 행 삭제
	return "redirect:/shop/getbyseller?sellse=" + loginId;
}

 

 

 

 

0. 총 코드

 

Store.java

package com.example.demo.store;

import org.hibernate.annotations.OnDelete;
import org.hibernate.annotations.OnDeleteAction;

import com.example.demo.shopmember.Shopmember;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.JoinColumn;
import jakarta.persistence.ManyToOne;
import jakarta.persistence.SequenceGenerator;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Entity // 테이블 정의 
@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class Store {
	@Id
	@SequenceGenerator(name="seq_gen", sequenceName="seq_shopping", allocationSize=1)
	@GeneratedValue(strategy=GenerationType.SEQUENCE, generator="seq_shopping")
	private int num;
	
	private String name;
	private String info;
	private int price;
	private int amount;
	
	@ManyToOne // 여러 상품을 한 판매자가 등록할 수 있음
	@JoinColumn(name="seller", nullable=false)
	@OnDelete(action = OnDeleteAction.CASCADE)
	private Shopmember seller; // 판매자
	
	@Column(nullable=true)
	private String img1; // 이미지 경로
	@Column(nullable=true)
	private String img2;
	@Column(nullable=true)
	private String img3; 
	@Column(nullable=true)
	private String img4; 
	
	
}

 

StoreDto.java

package com.example.demo.store;

import org.springframework.web.multipart.MultipartFile;

import com.example.demo.shopmember.Shopmember;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class StoreDto {
	private int num;
	private String name;
	private String info;
	private int price;
	private int amount;
	private Shopmember seller;
	private String img1;
	private String img2;
	private String img3;
	private String img4;
	private MultipartFile[] f = new MultipartFile[4];
}

 

StoreDao.java (interface)

package com.example.demo.store;

import java.util.ArrayList;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.shopmember.Shopmember;

@Repository
public interface StoreDao extends JpaRepository<Store, Integer> {
	// 판매자별 상품 검색 
	ArrayList<Store> findBySeller(Shopmember seller);
	
	// 가격대로 상품 검색 
	ArrayList<Store> findByPriceBetween(int p1, int p2);

}

 

StoreService.java

package com.example.demo.store;

import java.util.ArrayList;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.shopmember.Shopmember;

@Service
public class StoreService {
	@Autowired
	private StoreDao dao;

	// 상품 등록 & 수정
	// img1, img2, img3, img4를 제외한 정보만 추가. 수정에서 img 값들을 할당.
	public int save(StoreDto dto) {
		Store s = dao.save(new Store(dto.getNum(), dto.getName(), dto.getInfo(), dto.getPrice(), dto.getAmount(), dto.getSeller(), dto.getImg1(), dto.getImg2(), dto.getImg3(), dto.getImg4()));
		return s.getNum();
	}
	
	// 상품 전체 검색
	public ArrayList<StoreDto> getAll(){
		ArrayList<Store> list = (ArrayList<Store>) dao.findAll();
		ArrayList<StoreDto> list2 = new ArrayList<StoreDto>();
		for (Store s:list) { // list 길이만큼 반복하며 값을 하나씩 꺼내서 변수 s에 담음.
			list2.add(new StoreDto(s.getNum(), s.getName(), s.getInfo(), s.getPrice(), s.getAmount(), s.getSeller(), 
					s.getImg1(), s.getImg2(), s.getImg3(), s.getImg4(), 
					null)); // multipart는 db에 안넣을 거니까 Null.
			
		}
		return list2;
	}
	
	// 판매자로 검색 
	public ArrayList<StoreDto> getBySeller(String seller) {
		Shopmember vo = new Shopmember(seller, "", "", "", 0);
		ArrayList<Store> list = (ArrayList<Store>) dao.findBySeller(vo);
		ArrayList<StoreDto> list2 = new ArrayList<StoreDto>();
		for (Store s:list) { // list 길이만큼 반복하며 값을 하나씩 꺼내서 변수 s에 담음.
			list2.add(new StoreDto(s.getNum(), s.getName(), s.getInfo(), s.getPrice(), s.getAmount(), s.getSeller(), 
					s.getImg1(), s.getImg2(), s.getImg3(), s.getImg4(), 
					null)); // multipart는 db에 안넣을 거니까 Null.
			
		}
		return list2;
	}
	
	// 가격대로 검색
	public ArrayList<StoreDto> getByPrice(int p1, int p2){
		ArrayList<Store> list = (ArrayList<Store>) dao.findByPriceBetween(p1, p2);
		ArrayList<StoreDto> list2 = new ArrayList<StoreDto>();
		for (Store s:list) { // list 길이만큼 반복하며 값을 하나씩 꺼내서 변수 s에 담음.
			list2.add(new StoreDto(s.getNum(), s.getName(), s.getInfo(), s.getPrice(), s.getAmount(), s.getSeller(), 
					s.getImg1(), s.getImg2(), s.getImg3(), s.getImg4(), 
					null)); // multipart는 db에 안넣을 거니까 Null.
			
		}
		return list2;
	}
	
	// 상품번호로 검색 
	public StoreDto getShop(int num) {
		Store s = dao.findById(num).orElse(null);
		if(s==null) {
			return null;
		}
		return new StoreDto(s.getNum(), s.getName(), s.getInfo(), s.getPrice(), s.getAmount(), s.getSeller(), 
				s.getImg1(), s.getImg2(), s.getImg3(), s.getImg4(), 
				null);
	}
	
	// 삭제 
	public void delShop(int num) {
		dao.deleteById(num);
	}

}

 

StoreControllser.java

package com.example.demo.store;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.util.ArrayList;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import jakarta.servlet.http.HttpSession;

@Controller
@RequestMapping("/shop")
public class StoreController {
	@Autowired
	private StoreService service;
	
	// application.properties 파일의 속성값 읽기 
	@Value("${spring.servlet.multipart.location}") 
	private String path; // /Users/choeyeeun/Desktop/img/shop/
	
	// 판매자로 검색
	// 판매자:내상품목록, 구매자:판매자로상품검색
	@RequestMapping("/getbyseller")
	public String getbyseller(String seller, ModelMap map, HttpSession session) {
		ArrayList<StoreDto> list = service.getBySeller(seller);
		map.addAttribute("list", list);
		String bodyview = "/WEB-INF/views/";
		int type = (int)session.getAttribute("type");
		if(type==1) { // 구매자
			bodyview += "shoporder/list.jsp"; // 판매자로 검색 결과 리스트
		} else if (type==2) { // 판매자
			bodyview += "shop/list.jsp"; // 판매자 본인 올린 상품 리스트 
		}	
		map.addAttribute("bodyview", bodyview);
		return "index";
	}
	
	// 상품등록 폼
	@GetMapping("/add")
	public String addForm(ModelMap map) {
		map.addAttribute("bodyview", "/WEB-INF/views/shop/add.jsp");
		return "index";
	}
	
	// 상품등록 완료
	@PostMapping("/add")
	public String add(ModelMap map, StoreDto dto, HttpSession session) {
		String loginId = (String) session.getAttribute("loginId"); // 로그인한 id값 읽기
		int num = service.save(dto); // 상품 추가(name, info, price, amount, seller)
		// 상품이 추가될 때 상품 번호 자동으로 생김(시퀀스).  그 번호를 반환.
		
		// 이미지 업로드할 경로 추가 
		File dir = new File(path+num);
		// mkdir() : 디렉토리 생성 명령어 
		dir.mkdir(); // /Users/choeyeeun/Desktop/img/shop/num 인 디렉토리 생성 => 상품 이미지 폴더 
		MultipartFile[] f = dto.getF();
		String[] imgs = new String[4];
		for (int i = 0; i < f.length; i++) {
			MultipartFile x = f[i];
			String fname = x.getOriginalFilename();
			if (fname != null && fname.equals("")) {
				//String fname = x.getOriginalFilename();//원본파일명
				String newpath = path+num+"/"+fname;
				File newfile = new File(newpath); // 복사할 새 파일 생성 /Users/choeyeeun/Desktop/img/shop/num/fname
				System.out.println(newpath);
				try {
					x.transferTo(newfile);//파일 업로드 
					imgs[i] = newpath;
				} catch (IllegalStateException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		dto.setImg1(imgs[0]);
		dto.setImg2(imgs[1]);
		dto.setImg3(imgs[2]);
		dto.setImg4(imgs[3]);
		dto.setNum(num);
		service.save(dto); // 방금 추가한 상품 수정
		return "redirect:/shop/getbyseller?seller="+loginId;
	}
	
	@GetMapping("/read_img")
	// 응답 객체(헤더, 바디)를 생성해서 반환.
	// 헤더 : 목적지 주소, 내 주소, 마임타입, 크기...
	// 바디 : 전송할 데이터 자체 
	public ResponseEntity<byte[]> read_img(String fname){
		File f = new File(fname);
		HttpHeaders header = new HttpHeaders(); //HttpHeaders 객체 생성
		ResponseEntity<byte[]> result = null; //선언
		try {
			header.add("Content-Type", Files.probeContentType(f.toPath()));//응답 데이터의 종류를 설정
			//응답 객체 생성
			result = new ResponseEntity<byte[]>(FileCopyUtils.copyToByteArray(f),
					header, HttpStatus.OK);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return result;
	}
	
	// 상품 디테일 띄우기 
	@GetMapping("/edit")
	public String edit(ModelMap map, int num){
		StoreDto dto = service.getShop(num);
		map.addAttribute("dto", dto);
		map.addAttribute("bodyview", "/WEB-INF/views/shop/edit.jsp");
		return "index";
	}
	
	
	// 이미지 하나 수정
	@PostMapping("/editimg")
	public String editimg(int num, MultipartFile f1, int imgnum) {
		StoreDto dto = service.getShop(num);
		String fname = f1.getOriginalFilename();
		String newpath = "";
		if (fname != null && !fname.equals("")) {
			// String fname = x.getOriginalFilename();//원본파일명
			newpath = path + num + "/" + fname;
			File newfile = new File(newpath);// 복사할 새 파일 생성. c:/shop/번호/원본파일명
			//System.out.println(newpath);
			try {
				f1.transferTo(newfile);// 파일 업로드
				String delf = ""; // 삭제할 파일 경로
				switch (imgnum) {
				case 1:
					delf = dto.getImg1(); // 기존파일을 삭제경로에 담기 
					dto.setImg1(newpath); // 새 파일 경로로 변수값 변경 
					break;
				case 2:
					delf = dto.getImg2();
					dto.setImg2(newpath);
					break;
				case 3:
					delf = dto.getImg3();
					dto.setImg3(newpath);
					break;
				case 4:
					delf = dto.getImg4();
					dto.setImg4(newpath);
					break;
				}
				if (delf != null) {
					File delFile = new File(delf); // 그 경로에 있는 파일 객체 가져오기 
					delFile.delete();
				}
				service.save(dto);
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return "redirect:/shop/edit?num=" + num;
	}
	
	// 이미지 하나 삭제 
	@GetMapping("/delimg")
	public String delimg(int num, int imgnum) {
		StoreDto dto = service.getShop(num);
		String delf = "";
		switch (imgnum) {
		case 1:
			delf = dto.getImg1();
			dto.setImg1(null);
			break;
		case 2:
			delf = dto.getImg2();
			dto.setImg2(null);
			break;
		case 3:
			delf = dto.getImg3();
			dto.setImg3(null);
			break;
		case 4:
			delf = dto.getImg4();
			dto.setImg4(null);
			break;
		}
		if (delf != null) {
			File delFile = new File(delf);
			delFile.delete();
		}
		service.save(dto);
		return "redirect:/shop/edit?num=" + num;
	}

	
	// 이미지 제외한 값 수정 
	@PostMapping("/edit")
	public String edit(ModelMap map, StoreDto dto) {
		StoreDto dto1 = service.getShop(dto.getNum());
		dto1.setName(dto.getName());
		dto1.setInfo(dto.getInfo());
		dto1.setPrice(dto.getPrice());
		dto1.setAmount(dto.getAmount());
		int num = service.save(dto1);
		
		map.addAttribute("dto", service.getShop(num));
		map.addAttribute("bodyview", "/WEB-INF/views/shop/edit.jsp");
		return "index";
	}
	
	// 게시글 삭제
	@GetMapping("/del")
	public String del(int num, HttpSession session) {
		String loginId = (String) session.getAttribute("loginId");
		String delPath = path + num + "/";
		File dir = new File(delPath);
		File[] files = dir.listFiles(); // 디렉토리 안 파일들을 파일객체로 생성해서 줌.
		for(File f: files) { // 상품 이미지들 삭제
			f.delete();
		}
		dir.delete(); // 디렉토리 삭제
		service.delShop(num); // db에서 행 삭제
		return "redirect:/shop/getbyseller?sellse=" + loginId;
	}
	
	@RequestMapping("/list")
	public String list(ModelMap map) {
		map.addAttribute("list", service.getAll());
		map.addAttribute("bodyview", "/WEB-INF/views/shoporder/list.jsp");
		return "index";
	}
	
	@RequestMapping("/getbyprice")
	public String getbyprice(ModelMap map, int p1, int p2) {
		map.addAttribute("list", service.getByPrice(p1, p2));
		map.addAttribute("bodyview", "/WEB-INF/views/shoporder/list.jsp");
		return "index";
	}
	
	@RequestMapping("/detail")
	public String detail(int num, ModelMap map) {
		StoreDto dto = service.getShop(num);
		map.addAttribute("dto", dto);
		map.addAttribute("bodyview", "/WEB-INF/views/shoporder/detail.jsp");
		return "index";
	}

}

 

add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>상품등록</h3>
<form action="/shop/add" method="post" enctype="multipart/form-data">
<table border="1">
<tr><th>상품명</th><td><input type="text" name="name"></td></tr>
<tr><th>설명</th><td><textarea name="info" rows="5" cols="30"></textarea></td></tr>
<tr><th>가격</th><td><input type="number" name="price"></td></tr>
<tr><th>수량</th><td><input type="number" name="amount"></td></tr>
<tr><th>판매자</th><td><input type="text" name="seller" value="${sessionScope.loginId }" readonly></td></tr>
<tr><th>상품 이미지1</th><td><input type="file" name="f[0]"></td></tr>
<tr><th>상품 이미지2</th><td><input type="file" name="f[1]"></td></tr>
<tr><th>상품 이미지3</th><td><input type="file" name="f[2]"></td></tr>
<tr><th>상품 이미지4</th><td><input type="file" name="f[3]"></td></tr>
<tr><th>등록</th><td><input type="submit" value="등록"></td></tr>
</table>
</form>
</body>
</html>

 

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>내 상품목록</h3>
<table border="1">
<tr><th>img</th><th>num</th><th>name</th><th>seller</th></tr>
<c:forEach var="dto" items="${list }">
<tr>
<td><img src="/shop/read_img?fname=${dto.img1 }" width="100" height="100"></td>
<td>${dto.num }</td>
<td><a href="/shop/edit?num=${dto.num }">${dto.name }</a></td>
<td>${dto.seller.id }</td>
</tr>
</c:forEach>
</table>
</body>
</html>

 

edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
	width:200px;
	height:200px;
}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
// 		$('#imgf').hide();
		$(".e").click(function(){
			let id = $(this).attr("id");
			let num = id.substring(2);
			$('#imgnum').attr("value", num);
// 			$('#imgf').show();
		});
		$('#imgf').click(function(){
// 			$('#imgf').hide();
		});
		
		$(".d").click(function(){
			let id = $(this).attr("id");
			let num = id.substring(2);
			location.href="/shop/delimg?num=${dto.num }&imgnum="+num;
		});
	});
</script>
</head>
<body>
<h3>상품정보: ${dto.name }</h3>

<table>
	<tr>
		<td>
			<c:if test="${not empty dto.img1}">
				<img src="/shop/read_img?fname=${dto.img1}">
			</c:if>
			<c:if test="${empty dto.img1}">
				이미지 없음
			</c:if>
		</td>
		<td>
			<c:if test="${not empty dto.img2}">
				<img src="/shop/read_img?fname=${dto.img2}">
			</c:if>
			<c:if test="${empty dto.img2}">
				이미지 없음
			</c:if>
		</td>
		<td>
			<c:if test="${not empty dto.img3}">
				<img src="/shop/read_img?fname=${dto.img3}">
			</c:if>
			<c:if test="${empty dto.img3}">
				이미지 없음
			</c:if>
		</td>
		<td>
			<c:if test="${not empty dto.img4}">
				<img src="/shop/read_img?fname=${dto.img4}">
			</c:if>
			<c:if test="${empty dto.img4}">
				이미지 없음
			</c:if>
		</td>
	</tr>
	<tr>
		<td><input type="button" class="e" id="eb1" value="수정"><input type="button" class="d" id="db1" value="삭제"></td>
		<td><input type="button" class="e" id="eb2" value="수정"><input type="button" class="d" id="db2" value="삭제"></td>
		<td><input type="button" class="e" id="eb3" value="수정"><input type="button" class="d" id="db3" value="삭제"></td>
		<td><input type="button" class="e" id="eb4" value="수정"><input type="button" class="d" id="db4" value="삭제"></td>
	</tr>
</table>
<div id="imgf">
<form action="/shop/editimg" method="post" enctype="multipart/form-data">
<input type="file" name="f1"><br/>
<input type="hidden" name="num" value="${dto.num }">
<input type="hidden" name="imgnum" id="imgnum">
<input type="submit" value="이미지 수정">
<input type="button" value="취소" id="cancel">
</form>
</div>
<form action="/shop/edit" method="post">
<table border="1">
<tr><th>상품명</th><td><input type="text" name="name" value="${dto.name }"></td></tr>
<tr><th>설명</th><td><textarea name="info" rows="5" cols="30">${dto.info }</textarea></td></tr>
<tr><th>가격</th><td><input type="number" name="price" value="${dto.price }"></td></tr>
<tr><th>수량</th><td><input type="number" name="amount"  value="${dto.amount }"></td></tr>
<tr><th>판매자</th><td><input type="text" name="seller" value="${sessionScope.loginId }" readonly></td></tr>
</table>
<input type="hidden" name="num" value="${dto.num}">
<input type="submit" value="수정">
<input type="button" value="삭제" onclick="location.href='/shop/del?num=${dto.num}'">
</form>
</body>
</html>