대용량 파일 청킹 일반적으로 사용되는 웹 서버에는 서버에 데이터를 제출하는 데 크기 제한이 있습니다. 특정 크기를 초과하는 파일의 경우 서버는 거부 메시지를 반환합니다. 물론 웹 서버는 크기 제한을 수정할 수 있는 구성 파일을 제공합니다. 파일 크기를 제한하도록 웹 서버를 수정하여 대용량 파일을 IIS에 업로드하는 몇 가지 방법도 있습니다. 그러나 이는 웹 서버의 보안에 문제를 야기합니다. 공격자는 쉽게 대용량 데이터 패킷을 보내고 웹 서버를 직접 끌어서 죽일 수 있습니다.
현재 대용량 파일을 업로드하기 위한 주류 구현 방법은 대용량 파일을 덩어리로 나누는 것입니다. 예를 들어 100M 파일의 경우 2M에 따라 50개의 블록으로 분할합니다. 그런 다음 각 파일을 차례로 서버에 업로드하고, 업로드가 완료된 후 서버에서 파일을 병합합니다.
웹에서 대용량 파일 업로드를 구현하기 위해 코어에서는 주로 파일 분할을 구현합니다. Html5 File API가 등장하기 전에는 웹에서 파일 전송을 청크 단위로 구현해야 했습니다. 파일 청크는 플래시나 ActiveX를 통해서만 달성할 수 있습니다.
Html5에서는 파일의 슬라이스 방식을 통해 파일 분할을 직접 구현할 수 있습니다. 예:
XML/HTML 코드클립보드에 콘텐츠 복사
- file.slice(0,1000)
- file.slice(1000,2000)
- file.slice(2000,3000)
그런 다음 XMLHttpRequest를 통해 비동기적으로 서버에 업로드됩니다.
Html5 업로드 파일 클래스 라이브러리 관심이 있고 시간이 있다면 물론 html5의 File API를 사용하여 직접 구현할 수도 있습니다. 인터넷에서 HTML5를 지원하는 다음 두 라이브러리를 찾았습니다.
resumable.js 첨부된 git의 주소는 다음과 같습니다: https://github.com/23/resumable.js
Pludload http://plupload.com/
resumable은 순수 HTML5 업로드입니다. 수업 도서관.
Pludload는 html5, flash, silverlight 및 html4를 지원합니다. 브라우저가 html5를 지원하는지 여부를 자동으로 확인하고 다른 업로드 방법을 사용합니다.
테스트해본 결과 resumable과 Pludload 모두 html5 파일 청크 업로드를 지원하는 것으로 나타났습니다. 사용해본 결과 Resumable이 더 적합하다고 생각하여 아래 소개에서는 Resumable을 선택하겠습니다.
resumable.js 중단점 업로드 사용 소개
기본 구성 소개:
JavaScript 코드클립보드에 콘텐츠 복사
- var r = new Resumable({
-
대상:'/테스트/업로드',
- 덩어리 크기:1*1024*1024,
- 동시 업로드 수:4,
-
testChunks: true,
- ThrottleProgressCallbacks:1,
-
방법: "옥텟"
- })
ChunkSize 청크 파일 크기(바이트)
simultaneousUploads 동시에 파일 청크를 업로드하는 프로세스 수로, 여러 파일 청크를 동시에 업로드할 수 있습니다.
testChunks는 파일이 업로드되었는지 감지하기 위해 이전 파일 청크가 먼저 get 메소드를 통해 파일 정보를 보내야 하는지 여부를 확인합니다.
재개 가능한 중단점 업로드는 true로 설정된 경우 testChunks 구성 노드를 통해 구현됩니다. resumable은 http 상태가 200을 반환하는 경우 먼저 get 요청을 보냅니다. 현재 블록이 업로드된 것으로 간주하고, 다음 블록에 대한 가져오기 요청을 합니다. 반환된 http 상태가 200이 아닌 경우 현재 블록 데이터 패킷은 파일 블록 업로드를 위해 포스트 모드를 통해 전송됩니다.
testChunks를 true로 설정하면 마지막으로 중단된 업로드 이전에 파일의 청크 수를 이미 알고 있는 경우 각 업로드에 대한 가져오기 요청이 추가됩니다. 다음에는 중단된 블록 번호에서 직접 업로드하면 됩니다. 이렇게 하면 각 블록에 대한 하나의 http 가져오기 요청이 줄어듭니다.
이 요구 사항에 대응하여 resumable의 소스 코드를 수정하고 resumable의 파일 객체에 startchunkindex 속성을 추가했습니다. 기본값은 0입니다. 현재 파일을 업로드해야 하는 블록을 설정하는 데 사용됩니다. 이런 방식으로 파일을 업로드하기 전에 서버에서 쿼리(현재 파일이 어느 블록에 업로드되어 있는지 쿼리)를 수행하고 마지막으로 업로드된 파일 블록 인덱스를 반환하기만 하면 됩니다. 그런 다음 인덱스 값을 파일의 startchunkindex 속성으로 설정하여 마지막 연결이 끊어진 파일 블록부터 업로드를 시작합니다.
전화 방법:
JavaScript 코드클립보드에 콘텐츠 복사
-
-
r.on('fileAdded', function (파일) {
-
~ .
자세한 내용은 첨부파일에서 데모를 확인하실 수 있습니다.
마무리 작업
모든 파일 블록이 업로드된 후 마지막 작업은 파일을 병합하고 저장하는 것입니다. 첨부 파일은 간단한 파일 병합 기능을 포함하여 재개 가능한 upload.net 구현의 서버 예제입니다. Resumable의 Git에서 다른 언어로 된 데모를 다운로드할 수도 있습니다.
단순화를 위해 데모 예시에서는 로컬 시스템에만 파일을 저장합니다. 실제 생산 환경에서. 일반적으로 별도의 파일 서버에 배치해야 하며(프런트엔드 웹은 ftp 또는 폴더 공유를 통해 파일 서버에 업로드) 업로드된 파일을 배포, 미러링 또는 처리(예: 비디오 압축)해야 합니다. 물론 분산 파일 시스템에 저장하는 것이 가장 좋지만 현재로서는 HDFS(Hadoop Distributed File System)에 넣는 것이 좋은 해결책인 것 같습니다.
데모 Vs2012 Html5 데모 다운로드 업로드
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
