Lambda, API Gateway, AJAX 주거니 받거니

웹에서 input 데이터를 API Gateway 로 보내려고 AJAX를 사용했다.

아래 코드는 웹에서 클릭 버튼을 눌렀을때, input 데이터들을 api 로 전달해주고 + output 데이터들을 받아오는 Funtion 이다

index.js

function clickclick(){
    let form = $("#ajax-upload-form");
    let formData = new FormData(form[0]);

    formData.append('inputdata_one', $("#inputdata_one").val());
    formData.append('inputdata_two', $("#inputdata_two").val());
	//formData 에 전달해줄 INPUT 데이터값들을 추가로 붙여준다. 

    this.result = []
    $.ajax({
    type: "POST",
    url: 'https://vvvvvv.execute-api.us-east-1.amazonaws.com/pp/predict',  //api gateway URL
    header: {
        "Content-Type": "application/json",	//Content-Type 설정
        "X-HTTP-Method-Override": "POST",
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Age': 3600
    },
    dataType: "json",
    data: formData,
    AccessControlAllowOrigin: '*',
    crossDomain: true,
    contentType: false,
    async: false,
    enctype: 'multipart/form-data',
    processData: false,

    success: function (data, status) { //람다에서 제대로 잘 돌아왔을때,
        let result = data['body'] //API 에서 건너온값 data 중 'body'부분만 솎아낸다
        result = result.replace("\"", ""); 
        result = result.split('&');  //result가 여러개라 &로 구분하였기 때문에 끊어줌
        
        console.log("data : ", data) //잘들어온건지 확인하고 싶어서
        console.log(result[0]) //잘나눠졌는지 확인하고 싶어서
    },
    error: function (e) {
        console.log("ERROR : ", e);
        $("#btnSubmit").prop("disabled", false);
        alert(e.message);
    }
    });
}

 

index.html 일부 (파일올리고 제출하는 부분)

                    <form method="POST" enctype="multipart/form-data" id="ajax-upload-form" name="upload-form">
                        <input type="file" name="upload-file" id="upload-file" onchange="loadFile(this)" required>
                        <input type="button" value="Submit" id='ajax-submit'>
                    </form>

 

이렇게 웹에서 input 데이터들을 api 를 통해서 람다에서 받아보면 아래처럼 data가 들어온다.

 

body = "------WebKitFormBoundaryWvqm9JrHYYK3TJSv\r\nContent-Disposition: form-data; name=\"upload-file\"; filename=\"sample.json\"\r\nContent-Type: application/json\r\n\r\n[{\"A\":1278.751,\"B\":7.168,\"C\":4025.032,\"D\":9.056,\"E\":56.962,\"F\":4646.806}]\r\n------WebKitFormBoundaryWvqm9JrHYYK3TJSv\r\nContent-Disposition: form-data; name=\"inputdata_one\"\r\n\r\nGGGGGGGG\r\n------WebKitFormBoundaryWvqm9JrHYYK3TJSv\r\nContent-Disposition: form-data; name=\"inputdata_two\"\r\n\r\n3333333\r\n------WebKitFormBoundaryWvqm9JrHYYK3TJSv--"

 

위는 data['body'] 부분이다.

인풋파일3개 (json 파일1개, 입력값2개) 가 잘 들어있는지 확인해보자면,

 

[{\"A\":1278.751,\"B\":7.168,\"C\":4025.032,\"D\":9.056,\"E\":56.962,\"F\":4646.806}] 이부분은 input 파일인 sample.json 안의 내용이다.

 

그외에 두가지 인풋이 더 있었는데 잘 살펴보면

inputdata_one : GGGGGGGG

inputdata_two : 3333333

로 들어가있음을 확인할수 있다.

 

해당 인풋파일 3개를 추출해내기 위해서 사용한 파싱방법

    json_feature = json.loads(body[body.find('['): body.rfind(']')+1]) 
    // json 파일안의 내용 뽑아내기
    
    body = body.replace('\n',"")
    body = body.replace('\r',"")
    body = body.replace('-',"")
	
    INPUTTWO = (body[body.find('inputdata_one')+14: body.rfind('WebKitFormBoundary')])
    body = (body[: body.rfind('WebKitFormBoundary')])
    INPUTONE = int(body[body.find('inputdata_one')+14: body.rfind('WebKitFormBoundary')])