Send XLSX File from Front end (Angular.js) to Back end with Fetch

Fetch 로 프론트에서 백사이드로 xlsx 파일 보내기 

 

xlsx 파일을 angular에서 input으로 받고 보내는 과정입니다.

해당 코드는 앵귤러 기반에서 작성했습니다. 

가장 프론트 단의 input 은 다음과 같이 작성합니다. 

 

 <input custom-on-change="uploadExcel" type="file" name="excelFile"  accept=".xlsx" >

프론트 단에서 아래와 같이 서버로 xlsx파일을 전송합니다. (Aungular환경에서 $scope 에 function을 만들어서 fetch를 사용했습니다.)

   $scope.uploadExcel = function (event) {
        var files = event.target.files;
        console.log("controller file", files);

            const formData = new FormData();
            formData.append('inputFile', file[0]);
            fetch('/api/excel/upload', {
                method: 'POST',
                headers: {
                    "Accept": '*/*'
                },
                body: formData
            }).then(

            ).catch(

            );
        }
       }

프론트에서 다음과 같이 보냅니다. 

 

그리고 서버단에서는 다음과 같이 받으면 xlsx파일을 읽어오는 것을 볼 수 있습니다. 이 방식은 파일을 일단 서버에 저장했다가 불러오는 방식이어서, stream과 같이 더 좋은 방식이 있을 수 있지 않나 싶습니다.  

app.post('/api/excel/upload', async function (request, response) {
        var form = new multiparty.Form();
        var data = [];
        var user = request.user;
        await form.parse(request, async (err, fields, files) => {
      
            let path;
            if (files['inputFile'][0]) {
                path = files['inputFile'][0].path;
            } else if (files.upload) {
                path = files['inputFile'][0].path;
            }

            console.log("PATH ::: ", path);
            var workbook = XLSX.readFile(path);
            var sheet_name_list = workbook.SheetNames;
            var SheetNames = {};

        });
    });