Angular 학습 노트work with zip(압축 파일 형식)

최근에 대량 생성을 하고 있습니다. 
지난번에 excel을 읽고 쓰면 excel의 자료를 통해 자료를 만들 수 있다고 말했습니다.그러나 자료는 항상 그림이 있는데, excel에 그림을 넣는 것은 좀 좋지 않다.
그래서 excel을 업로드하는 동시에 다른 폴더에 그림을 넣으려고 합니다. excel은 대응하는 그림 이름을 쓰면 됩니다. 
그 테이블은 여러 개의column이 그림일 수 있습니다. 그림을 한꺼번에 input 파일에 잃어버리면 체험이 좋지 않습니다.그래서 몇 개의 폴더로 나누어 그림을 담아서 column에 대응하는 게 좋아요.
그리고 zip에서 input 파일을 잃어버립니다.input 파일은 폴더를 잃어버리는 것을 지원할 수 있지만 사파리는 지원하지 않는 것 같습니다. 
그러니까 zip을 쓰는 게 좋을 것 같아.윈도우즈 10은 모두 zip을 가지고 있기 때문에 사용자에게 그리 어렵지 않다. 
그럼 js에 대해서 얘기해 볼게요.
 
nodejs가 발전한 지 여러 해가 되었는데, 플러그인이 이 일을 하지 않았다면 아무도 믿지 않을 것이다.그러니까 마음대로 찾아보면 돼요. 
https://github.com/Stuk/jszip
있다.d.ts 그래서 ng에게 친절해요.
따라 하시면 돼요.
https://stuk.github.io/jszip/documentation/examples/read-local-file-api.html
너무 간단해서 여기는 서술하지 않겠습니다.
위에는 읽기만 하고 쓴 부분은 현재 수요가 없기 때문에 나도 테스트를 하지 않았다.나중에 봐야지.
 
기초적인 것을 적어라.
Array Buffer, Blob 난 자주 헷갈려.이것 괜찮아요?
https://www.gobeta.net/books/ruanyf-javascript-tutorial/bom/arraybuffer/
Array Buffer는 약간 c#의 memory stream 같아요.
blob file stream
평소 input file의 File 대상은blob에서 파생된 것이다.
그래서 저희가 보통 쓰는 거는blob이에요.
대충 알았으면 좋겠어요.충분하다
 
테스트 코드를 적어주세요.

import * as JSZip from 'jszip';

const input = document.getElementById('input') as HTMLInputElement;
input.addEventListener('input', async e => {
    const file = Array.from(input.files)[0];
    // const arrayBuffer = await raedFileAsync(file);
    const zip = await JSZip.loadAsync(file);
    console.log(zip);
    type PathAndZipEntry = {
        relativePath: string;
        file: JSZip.JSZipObject;
    }
    const pathAndZipEntries: PathAndZipEntry[] = [];
    zip.forEach((relativePath, file) => {
        pathAndZipEntries.push({ relativePath, file });
    });
    const ajaxAsync = async (blob: Blob, fileName: string): Promise => {
        return new Promise(resolve => {
            const formData = new FormData();
            formData.append('file', blob, fileName);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://192.168.1.152:61547/api/uploadFile');
            xhr.onload = () => {
                resolve(xhr.response);
            }
            xhr.send(formData);
        });
    }

    for await (const { relativePath, file } of pathAndZipEntries) {
        console.log('relativePath', relativePath);
        const paths = relativePath.split('/');
        const blob = await file.async('blob');
        console.log(await ajaxAsync(blob, paths[paths.length - 1]));
    }

    input.value = '';
});