멀티파일 (이미지)업로드 구현

[1nwan22]

let selectFiles = new Array();
    $("#file").on("change", function(e) {
    selectFiles = []; // 초기화
    let files = e.target.files;
    let filesArr = Array.prototype.slice.call(files);
    console.log(files);
    console.log(filesArr);

    filesArr.forEach(function(f) { // 이미지파일 체크
    if (!f.type.match("image.*")) {
        alert ("이미지 파일만 업로드하세요.");
        return;
    }

        selectFiles.push(f);

    });

});

    $("#saveBtn").on("click", function() {
        console.log(selectFiles);
        let formData = new FormData();
        let name = $("#name").val().trim();
        let brand = $("#brand").val().trim();
        let price = $("#price").val().trim();
        let costPrice = $("#costPrice").val().trim();
        let stock = $("#stock").val().trim();
        let content = $("#content").val().trim();
        let status = $("#status").val().trim();

        for (let i = 0; i < selectFiles.length; i++) {
        console.log(selectFiles[i]);
        formData.append("images", selectFiles[i]);
        }

        console.log(formData);
        formData.append("name", name);
        formData.append("brand", brand);
        formData.append("price", price);
        formData.append("costPrice", costPrice);
        formData.append("stock", stock);
        formData.append("content", content);
        formData.append("status", status);

        $.ajax({
            type:"POST"
            , url:"/product/add-product"
            , data:formData
            , enctype:"multipart/form-data"
            , processData:false
            , contentType:false

            , success:function(data) {
                if (data.result == "success") {
                    alert("저장되었습니다.");
                    location.reload(true);
                } else {
                    alert("상품 등록 실패");
                }
            }
            , error:function(request, status, error) {
                alert("상품 등록 에러")
            }

    });

@PostMapping("/add-product")
    public Map<String, Object> addProduct(
        @RequestParam("name") String name,
        @RequestParam("brand") String brand,
        @RequestParam("price") int price,
        @RequestParam("costPrice") int costPrice,
        @RequestParam("stock") int stock,
        @RequestParam("content") String content,
        @RequestParam("status") String status,
        @RequestPart("images") List<MultipartFile> images) {

    Integer productId = (Integer) productBO.addProduct(name, brand, price, costPrice, stock, brand, status);
    productImageBO.addProductImage(productId, images);
    Map<String, Object> result = new HashMap<>();
    result.put("code", 200);
    result.put("result", "success");
    return result;
}

[1nwan22]

파일 배열로 담고 List로 받아서파일을 제외한 param들은 product DB로 넣고 productId를 받아서 productId로 product 테이블과 product_image 테이블로 나눠서 각각 저장했다

[1nwan22]

만들어뒀던 filemangerservice에 productId를 int로 처리할 수 있는 메소드를 동일하게 생성

[1nwan22]

시간 여유가 되면 post에서는 이미지 미리보기도 구현해볼 것

[1nwan22]

@RequestPart와 enctype/ contentType / processData에 대해서 추가적으로 공부할 것

[1nwan22]

import org.apache.ibatis.annotations.Param;

4시간 삽질의 원인 임포트 조심하자...