웹에서 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')])
