Vue.Js 및 자바 파일 분할 업로드 코드 인 스 턴 스 구현
코드 는 프로젝트 에서 수정 되 고 테스트 를 거치 지 않 고 아이디어 만 제공 합 니 다.
전단
upload(file) {
//
getIdx(md5)
.then(function(res) {
let retry = 3;
uploadPart(retry, file, res.data);
})
.catch();
}
uploadPart(retry, file, idx) {
// （ Byte）
let bufferLength = 1024 * 1024 * 5;
// ,idx ， 0
let start = idx * bufferLength;
//
if(start>=file.size || retry<=0) return;
//
let end = start + bufferLength;
// ，
if (end > file.size) {end = fileSize;}
//
var chunk = file.slice(start, end);
// formData
let formData = new FormData();
formData.set("file", chunk);
// ，
if (start == 0) {
// ,
let chunkNum = Math.ceil(file.size / bufferLength);
formData.set("total", chunkNum);
}
// api， axios
doUpload(formData)
// ， ，
.then(function() {
retry = xx;//
uploadPart(retry, file, ++idx);
})
//
.catch(function() {
retry--;//
//
uploadPart(retry, file, idx);
});
},//파일 자 르 기
var chunk = file.slice(start, end);
slice 방법 을 통 해 파일 을 절단 한 다음 에 파일 업로드 의 절 차 는 업무 와 구체 적 인 기술 에 따라 정 해 집 니 다.여 기 는 axios 로 요청 을 보 내 고 파일 블록 을 재 귀적 으로 호출 합 니 다.
주의해 야 할 것 은 Blob.slice(start,end)입 니 다.파일 블록 은 start 가 가리 키 는 바 이 트 를 포함 하고 end 가 가리 키 는 바 이 트 를 포함 하지 않 습 니 다.사용 할 때 Blob 의 경 계 를 주의해 야 합 니 다.
모 질 라 의 slice 에 대한 설명
백 엔 드
/** */
public static void doMergeFiles(String outFile, String[] files) {
//
int BUFSIZE = 1024 * 1024;
// 。 。
Arrays.sort(files);
//
FileChannel outChannel = null;
//
String lastFlag = files[files.length-1];
try {
outChannel = new FileOutputStream(outFile).getChannel();
//
for(String f : files){
// ， md5
if(lastFlag.equals(f)){
File last = new File(f);
BUFSIZE = (int) last.length();//
}
FileChannel fc = new FileInputStream(f).getChannel();
// ByteBuffer
ByteBuffer bb = ByteBuffer.allocate(BUFSIZE);
while(fc.read(bb) != -1){//
bb.flip();//
outChannel.write(bb);//
bb.clear();//
}
fc.close();//
}
} catch (IOException ioe) {
ioe.printStackTrace();
} finally {
try {if (outChannel != null) {outChannel.close();}} catch (IOException ignore) {}
}
}*8195:8195:성능 을 향상 시 키 기 위해 캐 시 크기 를 적당 하 게 설정 할 수 있 습 니 다.파일 을 올 리 면서 합 칠 수 있 습 니 다.파일 이 올 라 올 때 까지 기다 리 지 않 아 도 됩 니 다.
넓히다
이곳 의 파일 업 로드 는 한 번 에 한 조각 씩 업로드 되 었 고 업로드 에 성공 해서 야 다음 영 화 를 업로드 하기 시작 했다.전단 에 자바 script 을 사용 하지 않 고 다 중 스 레 드 를 사용 할 수 있다 면 여러 개의 파일 을 동시에 업로드 하여 업로드 속 도 를 높 일 수 있 습 니 다.업 로드 된 파일 조각 은 bitmap 로 저장 되 어 있 습 니 다.파일 을 업로드 하기 전에 배경 에서 업 로드 된 파일 조각 을 가 져 온 bitmap 데 이 터 를 분석 하고 업로드 되 지 않 은 파일 조각 을 다 중 스 레 드 로 처리 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
