Vue 2.0 웹 uploader 와 결합 하여 파일 분할 업로드 기능 실현
10189 단어 vuewebuploader파일 업로드
올 리 면 올 려.왜 그렇게 귀 찮 게 만들어 서 나 눠 서 올 려?
블록 버스터 와 병발 을 결합 하여 하나의 큰 파일 을 여러 블록 으로 나 누 어 동시에 업로드 하여 큰 파일 의 업로드 속 도 를 크게 향상 시킨다.
네트워크 문제 로 전송 오류 가 발생 했 을 때 전체 파일 이 아 닌 오 류 를 다시 전송 해 야 합 니 다.또한 필름 전송 은 업로드 진 도 를 더욱 실시 간 으로 추적 할 수 있다.
실현 후의 인터페이스:
주로 두 개의 파일 입 니 다.봉 인 된 업로드 구성 요소 와 구체 적 인 ui 페이지 입 니 다.업로드 구성 요소 코드 아래 에 열 거 됩 니 다.이 두 페이지 의 코드 는 github 에 올 려 졌 다.https://github.com/shady-xia/Blog/tree/master/vue-webuploader.
프로젝트 에 webuploader 도입
1.먼저 시스템 에 jquery 를 도입 합 니 다(플러그 인 은 jq 기반,아버지!).어디 에 놓 을 지 모 르 면 index.html 에 넣 으 세 요.
2.홈 페이지 에서
Uploader.swf
과 webuploader.min.js
을 다운로드 하면 프로젝트 정적 디 렉 터 리 static 아래 에 놓 을 수 있 습 니 다.index.html 에 webuploader.min.js 를 도입 합 니 다.
( webuploader.css , css, vue 。)
<script src="/static/lib/jquery-2.2.3.min.js"></script>
<script src="/static/lib/webuploader/webuploader.min.js"></script>
주의해 야 할 점:1.vue 구성 요소 에서
import './webuploader'
을 통과 합 니 다.webuploader
방식 을 도입 하면'caller','callee',and'arguments'properties may not be accessed on strict mode...'의 오 류 를 보고 합 니 다.이것 은 당신 의 babel 이 엄격 한 모드 를 사 용 했 기 때 문 입 니 다.caller 는 엄격 한 모드 에서 사용 할 수 없습니다.그래서 index.html
에 webuploader.js
을 직접 도입 하거나 babel 에서'use strict'문 제 를 수 동 으로 해결 할 수 있 습 니 다.웹 uploader 기반 패키지 Vue 구성 요소
봉 인 된 구성 요소 upload.vue 는 다음 과 같 습 니 다.인 터 페 이 스 는 구체 적 인 업무 에 따라 확장 할 수 있 습 니 다.
메모:기능 과 ui 가 분리 되 어 있 습 니 다.이 구성 은 기본 적 인 기능 을 봉 인 했 고 ui 를 제공 하지 않 았 습 니 다.ui 는 구체 적 인 페이지 에서 이 루어 집 니 다.
<template>
<div class="upload">
</div>
</template>
<script>
export default {
name: 'vue-upload',
props: {
accept: {
type: Object,
default: null,
},
//
url: {
type: String,
default: '',
},
// 100
fileNumLimit: {
type: Number,
default: 100,
},
// 2M
fileSingleSizeLimit: {
type: Number,
default: 2048000,
},
// , token,key
formData: {
type: Object,
default: null
},
// formData key, ,
keyGenerator: {
type: Function,
default(file) {
const currentTime = new Date().getTime();
const key = `${currentTime}.${file.name}`;
return key;
},
},
multiple: {
type: Boolean,
default: false,
},
// ID
uploadButton: {
type: String,
default: '',
},
},
data() {
return {
uploader: null
};
},
mounted() {
this.initWebUpload();
},
methods: {
initWebUpload() {
this.uploader = WebUploader.create({
auto: true, // ,
swf: '/static/lib/webuploader/Uploader.swf', // swf
server: this.url, //
pick: {
id: this.uploadButton, //
multiple: this.multiple, // false
label: '',
},
accept: this.getAccept(this.accept), // 。
threads: 3,
fileNumLimit: this.fileNumLimit, //
//fileSingleSizeLimit: this.fileSingleSizeLimit, //
formData: this.formData, //
chunked: true, //
chunkSize: 2048000, //
duplicate: true, //
});
// ,
this.uploader.on('fileQueued', (file) => {
this.$emit('fileChange', file);
});
this.uploader.on('uploadStart', (file) => {
// formData
//this.uploader.options.formData.key = this.keyGenerator(file);
});
// 。
this.uploader.on('uploadProgress', (file, percentage) => {
this.$emit('progress', file, percentage);
});
this.uploader.on('uploadSuccess', (file, response) => {
this.$emit('success', file, response);
});
this.uploader.on('uploadError', (file, reason) => {
console.error(reason);
this.$emit('uploadError', file, reason);
});
this.uploader.on('error', (type) => {
let errorMessage = '';
if (type === 'F_EXCEED_SIZE') {
errorMessage = ` ${this.fileSingleSizeLimit / (1024 * 1000)}M`;
} else if (type === 'Q_EXCEED_NUM_LIMIT') {
errorMessage = ' ';
} else {
errorMessage = ` ! ! ${type}`;
}
console.error(errorMessage);
this.$emit('error', errorMessage);
});
this.uploader.on('uploadComplete', (file, response) => {
this.$emit('complete', file, response);
});
},
upload(file) {
this.uploader.upload(file);
},
stop(file) {
this.uploader.stop(file);
},
//
cancelFile(file) {
this.uploader.cancelFile(file);
},
//
removeFile(file, bool) {
this.uploader.removeFile(file, bool);
},
getAccept(accept) {
switch (accept) {
case 'text':
return {
title: 'Texts',
exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt',
mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt'
};
break;
case 'video':
return {
title: 'Videos',
exteensions: 'mp4',
mimeTypes: '.mp4'
};
break;
case 'image':
return {
title: 'Images',
exteensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png'
};
break;
default: return accept
}
},
},
};
</script>
<style lang="scss">
// css
</style>
봉 인 된 업로드 구성 요소 사용 하기새 페이지,사용 예 는 다음 과 같 습 니 다.
ui 는 스스로 실현 해 야 한다.대충 코드 여기 눌 러 도 돼 요. 。
<vue-upload
ref="uploader"
url="xxxxxx"
uploadButton="#filePicker"
multiple
@fileChange="fileChange"
@progress="onProgress"
@success="onSuccess"
></vue-upload>
분 편의 원리 와 절차큰 파일 을 업로드 할 때 플러그 인 에 의 해 분 리 됩 니 다.ajax 는 다음 과 같이 요청 합 니 다.
1.여러 개의 upload 요청 은 모두 필름 분할 요청 으로 큰 파일 을 여러 개의 작은 부분 으로 나 누 어 한 번 에 서버 에 전달 합 니 다.
2.분할 완료 후,upload 완료 후 서버 에 merge 요청 을 전달 하여 서버 가 여러 개의 분할 파일 을 하나의 파일 로 합성 하도록 해 야 합 니 다.
조각 을 나누다
여러 번 upload 요청 을 한 것 을 볼 수 있 습 니 다.upload 가 보 낸 구체 적 인 인 인 자 를 살 펴 보 겠 습 니 다.
첫 번 째 설정(
content-disposition
)의 guid 와 두 번 째 설정 의 accesstoken,웹 uploader 설정 에 있 는 formData,즉 서버 에 전달 하 는 인자 입 니 다.뒤의 몇 가지 설정 은 파일 내용,id,name,type,size 등 입 니 다.
그 중에서 chunks 는 총 분 편수 이 고 chunk 는 현재 몇 번 째 분 편수 이다.사진 속 에는 각각 12 와 9 가 담 겨 있다.chunk 가 11 의 upload 요청 을 보 았 을 때 마지막 upload 요청 입 니 다.
합치다
조각 을 나 눈 후에 파일 이 아직 통합 되 지 않 았 습 니 다.데 이 터 는 아래 와 같 습 니 다.
분 편 을 마 친 후에 사실은 일이 아직 끝나 지 않 았 습 니 다.우 리 는 ajax 요청 을 서버 에 보 내 서 우리 가 올 린 몇 개의 분 편 을 하나의 완전한 파일 로 통합 하 라 고 알려 야 합 니 다.
나 눠 서 올 렸 는 지 어떻게 알 아?내 가 언제 합병 할 거 야?
webuploader
플러그 인 은 uploadSuccess
이벤트 가 있 습 니 다.두 개의 매개 변수,file 과 배경 에서 돌아 오 는 response 를 포함 합 니 다.모든 필름 업로드 가 완료 되면 이 사건 이 발생 합 니 다.우 리 는 서버 가 되 돌아 오 는 필드 를 통 해 합병 여 부 를 판단 할 수 있다.
예 를 들 어 배경 이 needMerge 로 돌 아 왔 습 니 다.우 리 는 그것 이 true 라 는 것 을 보 았 을 때 합병 요청 을 보 낼 수 있 습 니 다.
존재 하 는 기지 의 문제
단일 파일 을 일시 정지 하고 계속 업로드 할 때 이 플러그 인의 bug 를 발 견 했 습 니 다.
1.설 정 된
threads>1
은 단일 파일 업로드 기능,즉 stop 방법 으로 file 에 들 어 갈 때 Uncaught TypeError: Cannot read property 'file' of undefined
을 잘못 보고 합 니 다.오류 의 원본 코드 는 다음 과 같 습 니 다.일시 정지 시 다음 파일 을 계속 전송 하기 위해 현재 pool 풀 에서 pop 을 일시 정지 한 파일 흐름 을 떨 어 뜨 립 니 다.여기 서 순환 을 했 습 니 다.마지막 순환 을 할 때 v 는 undefined 입 니 다.
2.설 정 된 threads 는 1 로 정상적으로 일시 정지 할 수 있 으 나 일시 정지 후 계속 업로드 하 는 것 은 실 패 했 습 니 다.
원 리 는 이전 과 마찬가지 로 일시 정지 시 현재 파일 을 pool 에 모든 pop 으로 흐 르 게 합 니 다.파일 이 upload 를 시작 할 때 당기 pool 을 검사 합 니 다.이 때 는 일시 정지 한 파일 흐름 이 없습니다.
모든 파일 에 대한 전체 일시 정지 와 계속 이 라면 기능 은 정상 입 니 다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 2.0 과 webuploader 를 결합 하여 파일 분할 업로드 기능 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.