ajax를 사용하여 큰 파일을 보내는 방법은 무엇입니까?

Question

현재 사용자가 이미지를 서버에 업로드하는 간단한 프로젝트를 진행하고 있습니다. 나는 여기에 내 문제를 언급하기 전에 내가하고 있어요 방법은 다음과 같습니다

클라이언트 :

var dataURL = sendingcanvas.toDataURL("image/*"); 
var imagedatatosend = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
formdata = { 
    'image': imagedatatosend 
}; 

$.ajax({ 
    url: '../receive', 
    type: 'POST', 
    data: formdata, 
    encode: false, 
    success: function(result){ 
     alert(result); 
    } 
}); 

참고 : imagedatatosend 크기가 5메가바이트보다 낮은 선택된 정확히 파일 데이터가 포함되어 있습니다.

기본적으로 사용자는 <input type="file" 태그를 사용하여 이미지를 선택합니까 canvas에 그 선택된 파일을 base64로 변환하여 서버로 보내도록 설정합니다.

자바 서버 :

String datareceived = request.getReader().lines().collect(Collectors.joining(System.lineSeparator())); 

byte[] bImg = Base64.decodeBase64(datareceived.getBytes("UTF-8")); 
FileOutputStream fos = new FileOutputStream("hi.jpg"); 
fos.write(bImg); 
fos.close(); 

은 내가 위의 코드는 무엇을 설명 할 필요가없는 것 같아요. 하지만 나는 심각한 성능 문제에 직면하고있다. 심지어 System.out.println(datareceived);을 시도해도 파일을 hi.jpg에 기록하는 데 막대한 시간이 필요하다. 마우스를 클릭하여 서버 콘솔에서 응답하는 데 몇 초가 걸린다.

나는 왜 그런 일이 일어나는 지 모르겠다. 이미지 데이터를 multipart 또는 무엇으로 보내야 하나?

모든 응답은 사전에 감사하고 감사하고 있습니다 :

Answer 1

사용 XMLHttpRequest를하고 FormData 파일을 추가 할 수 있습니다. 그것은 multipart를 사용하여 전송되고 적절히 청크 될 것입니다.

은 참조 :이 독점적으로 자바 문제 같은 소리 https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects