React+EggJs 인터럽트 재전송을 위한 예제 코드

기술 창고
프런트엔드는 React, 백엔드는 EggJs, 모두 TypeScript로 작성되었습니다.
단점 속전 실현 원리
인터럽트 리셋은 파일을 업로드할 때 업로드된 파일을 잠시 멈추고 업로드를 재개할 때 전체 파일을 다시 업로드할 필요가 없다는 것이다.
이 기능의 실현 절차는 업로드된 파일을 먼저 절단한 다음에 절단된 파일 블록을 서버에 보내고 발송이 끝난 후에 서비스 측에 파일 블록을 조합하라고 통지하는 것이다.
그 중에서 업로드 정지 기능은 전단에서 파일 블록의 업로드 요청을 취소하고 업로드 복구는 업로드하지 않은 파일 블록을 다시 업로드하는 것이다.앞뒤가 잘 맞아야 돼요.
전면 구현
전단은 주로 파일 절단, 파일 MD5 값 얻기, 절단된 파일 블록 업로드, 파일 병합, 업로드 일시 중지 및 복원 등 기능으로 나뉜다.
절단 파일: 이 기능점은 전체 단점 속전에서 비교적 중요한 일환에 속한다. 여기서 자세히 설명한다.우리는 aax로 큰 파일을 업로드하는 데 시간이 비교적 오래 걸릴 것입니다. 업로드 도중에 요청을 취소하면 다음 업로드에서 전체 파일을 다시 업로드해야 합니다.그러나 큰 파일을 몇 개의 파일 블록으로 분해하여 업로드하면 업로드에서 요청을 취소하고 업로드된 파일 블록은 서버에 저장됩니다. 다음 업로드는 성공하지 못한 다른 파일 블록만 업로드하면 됩니다(전체 파일을 전송하지 않아도 됩니다).
여기에 파일 블록을 파일 ChunkList 수조에 넣으면 뒤에서 파일의 MD5 값을 얻고 파일 블록 등을 업로드할 수 있습니다.

//  HTML5 file.slice ，file.slice Blob 
let start = 0;
while (start < file.size) {
    fileChunkList.push({ file: file.slice(start, start + CHUNK_SIZE) });
    start += CHUNK_SIZE;
}

파일 MD5 값 가져오기: 서버가 업로드한 파일이 있는지 파일 이름을 통해 판단할 수 없습니다. 사용자가 업로드한 파일에 이름이 바뀔 수 있기 때문입니다.따라서 파일의 MD5 값을 가져오려면 파일 내용으로 구분해야 합니다.
spark-md5 모듈을 사용하여 파일의 MD5 값을 가져옵니다.모듈 상세 정보 여기 클릭

//  
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
fileReader.onload = e => {
    if (e.target && e.target.result) {
        count++;
        spark.append(e.target.result as ArrayBuffer);
    }
    if (count < totalCount) {
        loadNext();
    } else {
        resolve(spark.end());
    }
};
function loadNext() {
    fileReader.readAsArrayBuffer(fileChunkList[count].file);
}
loadNext();

절단된 파일 블록 업로드: 앞의 fileChunkList 수조에 따라 FormData를 사용하여 파일 블록을 업로드합니다.

//  
Axios.post(uploadChunkPath, formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
    cancelToken: source.token,
}).then(()=>{
    // ...
})

병합 파일: 모든 파일 블록이 업로드되면 aax 알림 서버를 보내서 서버에서 파일 블록을 병합할 수 있도록 합니다.

//  
Axios.get(mergeChunkPath, {
    params: {
        fileHash: targetFile,
        fileName,
    },
})

일시 정지 기능: 파일 블록을 업로드하는 요청을 하나의 그룹에 넣고 요청이 완료되면 그룹에서 삭제합니다.일시 정지를 눌렀을 때 그룹의 모든 요청을 일시 정지합니다.

/*   */
const source = CancelToken.source();
// ...
axiosList.push(source);

/*   */
axiosList.forEach((item) => item.cancel('abort'));
axiosList.length = 0;
message.error(' ');

업로드 복구: 서버에 가서 업로드된 파일 블록이 무엇인지 조회한 다음 업로드되지 않은 파일 블록을 업로드합니다.

//  
let uploadedFileInfo = await getFileChunks(this.fileName, this.fileMd5Value);
if (this.handleUploaded(uploadedFileInfo.fileExist) && uploadedFileInfo.chunkList) {
    this.uploadChunks(this.chunkListInfo, uploadedFileInfo.chunkList, this.fileName);
}

백엔드 구현
백엔드의 주요 작업은 파일에 대한 작업이다. 예를 들어 fs-extra 모듈을 사용하여 파일 정보를 얻고formidable 모듈을 사용하여 업로드된 파일을 분석하는 것이다.
대체적인 작성 과정:egg 프로젝트의 앱 디렉터리에서router를 찾습니다.ts 파일은 루트를 정의합니다. 루트를 정의하려면 controller 방법을 불러와야 합니다.그래서 우리는 이어서 컨트롤러 방법을 작성했다. 이 방법은 주로 요청 파라미터를 처리하고 서비스 방법으로 업무를 처리한 다음에 결과를 되돌려준다.주로router, controller, 서비스 세 부분입니다.
환경 구축
egg 문서가 아주 완전합니다. egg 문서를 직접 참고할 수 있습니다.여기서 간단하게 건설 절차를 말씀드리겠습니다.egg 문서
우선 npm initegg--type=ts를 실행하여egg 프로젝트를 설치한 다음router를 찾습니다.ts 파일은 업로드된 인터페이스를 처리하는 루트를 정의합니다.post('api/uploadChunk', controller.file.upload);이어서 각각 controller 디렉터리와 서비스 디렉터리에 대응하는 파일을 만듭니다. 예를 들어 cd app/controller/& 터치 파일입니다.ts;마지막으로 대응하는 문서에서 구체적인 업무를 작성한다.
인터페이스 작성
주로 세 개의 인터페이스가 있는데 그것이 바로 check Chunk, upload Chunk 인터페이스와merge Chunk 인터페이스이다.
checkChunk 인터페이스: 먼저 업로드된 파일이 존재하는지 판단하고 존재하면 전방 파일이 업로드되었음을 알려줍니다.파일이 존재하지 않으면 파일 블록을 저장하는 디렉터리가 존재하는지 확인하고, 디렉터리가 존재하면 업로드된 파일 블록 목록을 전방으로 되돌려줍니다.디렉터리가 존재하지 않으면 빈 목록을 전방으로 되돌려줍니다.

if (fileInfo.isFileExist) {
 checkResponse.fileExist = true;
} else {
 const fileList = await ctx.service.file.getFileList(fileMd5Val);
 checkResponse.chunkList = fileList;
 checkResponse.fileExist = false;
}
ctx.body = checkResponse;

업로드 Chunk 인터페이스:formidable 모듈로 업로드된 파일 블록을 분석하여 업로드된 파일 블록을 하나의 디렉터리에 통일시키고 파일의 MD5 값으로 디렉터리에 이름을 지정합니다.

import { IncomingForm } from 'formidable';
const form = new IncomingForm();
form.parse(req, async (err, fields, file) => {
  if (err) return err;
  const md5AndFileNo = fields.md5AndFileNo;
  const fileHash = fields.fileHash;
  const chunkFolder = resolve(this.config.uploadsPath, fileHash as string);
  if (!existsSync(chunkFolder)) {
    await mkdirs(chunkFolder);
  }
  move(file.chunk.path, resolve(`${chunkFolder}/${md5AndFileNo}`));
});

mergeChunk 인터페이스: 파일 MD5 값을 통해 디렉터리에 있는 파일 블록을createReadStream과createWriteStream으로 조합합니다.마지막으로 파일 조합이 끝난 후에 블록 디렉터리를 삭제합니다.

const readStream = createReadStream(path);
readStream.on('end', () => {
 unlinkSync(path);
 resolve();
});
readStream.pipe(writeStream);

단원 테스트
테스트 파일은 모두 테스트 디렉터리에 놓여 있으며, 동시에 반드시 사용해야 한다.test.ts 결말.
사례 작성: 먼저 테스트 파일 cd 테스트/앱/컨트롤러 & 터치 파일을 만듭니다.test.ts, 그리고 file.test.ts에서 테스트 코드를 작성하고 마지막으로 npmruntest-local 실행 테스트 사례를 실행합니다.
앱을 사용합니다.httpRequest()는 HTTP 요청을 보내고 매개 변수를 전송하여 반환 값이 예상과 동일한지 확인합니다.

describe('api/checkChunk', () => {
  //  
  it('should GET / file nonExist', async () => {
    const testHash = 'e62d28dd31fc4d1e92a81e7ae5be3cc6';
    const result = await app.httpRequest()
      .get('/api/checkChunk')
      .query({ fileName: '  2.zip', fileMd5Val: testHash })
      .expect(200);
    assert.deepEqual(result.body, { hash: testHash, fileExist: false, chunkList: [] });
  });
});

운행
npm i 설치 의존을 사용하고 로컬 환경에서 npm run dev를 사용하면 됩니다.생산 환경은 먼저 ts를 js로 컴파일하여 npmruntsc를 실행하고 npmrunstart 시작 서비스를 실행합니다.
코드 주소
프런트엔드 코드
백엔드 코드
마지막
전체 단점 속전의 원리를 이해하면 구체적인 코드 작성이 비교적 쉬워 자신의 프로젝트 수요에 따라 맞춤형으로 제작할 수 있다.본고에서 제공한 코드는 단지 기초적인 실현일 뿐, 여러분만 참고할 수 있습니다.
이 글은 React+EggJs가 단점 리셋을 실현하는 예시 코드에 대한 소개입니다. 더 많은 React EggJs 단점 리셋 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!