[WebOrder] (Banner.vue) 저장을 위해 시트에 추가한 파일 정보를 저장 리스트에 누적시키기

 

템플릿

<div> {{ _t("page.banner.pageTitle") }}
    <input type="file" multiple ref="fileInput" @change="fileChange" style="display: none;"/>
    <v-btn class="ml-3" color="primary" variant="flat" @click="addBanner" prepend-icon="mdi-plus">
        {{_t("page.item.file.select")}}
    </v-btn>
</div>

 

 

type="file" 이용해서 파일 첨부하는 기능에서

multiple 속성을 줬기 때문에 파일을 한 번에 여러 개 선택 후 -> 저장하는 것이 가능하다.

 

 

이건 저장하면 모두 잘 저장된다.

 

 

 

이렇게 하나씩 각각 등록 후 저장하면 마지막에 추가한 이미지만 저장되는 결함을 발견했다. 

 

 

 

 

스크립트

// 배너이미지 추가.
const fileChange = (event) => {
    const selectedFiles   = event.target.files;
    const userName = sessionInfo.userName;

    newFiles.value = Array.from(selectedFiles);

    newFiles.value.forEach(file => {
        newFiles.value.push(file);
        const newRow = sheet1.addRow({ Data: { check: 0 } });
        sheet1.setValue(newRow, "bannerImg", `<img src="${URL.createObjectURL(file)}" style="height:50px"/>`);
        sheet1.setValue(newRow, "savedFileName", file.name, 1);
        sheet1.setValue(newRow, "regDate", getDate(), 1);
        sheet1.setValue(newRow, "userName", userName, 1);
    });

    // 같은 파일 재선택을 위해 초기화
    if (fileInput.value) {
        fileInput.value.value= '';
    }
};

 

 

내가 가장 마지막에 선택한 파일 정보를 selectedFiles 에 넣고 forEach 돌려서 그렇다.

누적이 필요하다. push!!

 

 

Array.from(selectedFiles).forEach(file => {
    newFiles.value.push(file);

 

이 부분으로 변경할 것이다.

 

아래가 완성.

 

// 배너이미지 추가.
const fileChange = (event) => {
    const selectedFiles   = event.target.files;
    const userName = sessionInfo.userName;

    // newFiles.value = Array.from(selectedFiles);

    // newFiles.value.forEach(file => {
    Array.from(selectedFiles).forEach(file => {
        newFiles.value.push(file);
        const newRow = sheet1.addRow({ Data: { check: 0 } });
        sheet1.setValue(newRow, "bannerImg", `<img src="${URL.createObjectURL(file)}" style="height:50px"/>`);
        sheet1.setValue(newRow, "savedFileName", file.name, 1);
        sheet1.setValue(newRow, "regDate", getDate(), 1);
        sheet1.setValue(newRow, "userName", userName, 1);
    });

    // 같은 파일 재선택을 위해 초기화
    if (fileInput.value) {
        fileInput.value.value= '';
    }
};

 

 

이러면~ 

원하는대로 너무 잘 동작한다.