HTML5 드래그 앤 드롭 방식으로 파일을 일괄 업로드하기 위한 샘플 코드

이 구성 요소는 Vue.js를 기반으로 구현됩니다. UI 프레임워크는 elementUI입니다. 전체 데모 주소는 https://github.com/Msxiaoma/upload-folder에 있습니다. 폴더를 업로드하려면 (Chrome에서만 지원됩니다.)

1. 여러 폴더를 동시에 끌어서 놓기
2. 지정된 폴더 삭제
3. 현재 폴더의 업로드 진행 표시줄을 표시합니다.
4. 5M이 넘는 폴더를 분할 업로드

효과는 다음과 같습니다.

1. 끌어서 놓아 각 폴더 아래의 파일 경로를 읽습니다.
2. 현재 업로드된 폴더의 진행 표시줄을 표시하는 방법
3. 파일 업로드 시 도메인 간 쿠키 전달
4. 폴더 조각화

드래그 앤 드롭 작업을 수행할 때 DataTransfer 개체는 드래그 앤 드롭 작업을 통해 브라우저로 드래그된 데이터를 저장하는 데 사용됩니다. 하나 이상의 데이터, 하나 이상의 데이터 유형을 저장할 수 있습니다.

 // 폴더 드래그 dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i] .webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// 폴더인지 확인 checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('폴더 업로드만 지원합니다.', 'Prompt', { verifyButtonText: 'OK' }) }}traverseFileTree (item, path, parentDir ) { 경로 = 경로 || '' if (item.isFile) { item.file((파일) => { let obj = { 파일: 파일, 경로: 경로 + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (let i = 0; i < 항목.길이; i++) { 항목[i].attr = item.attr this.traverseFileTree(항목[i], 경로 + 항목.이름 + '/', 임시) } }, 함수 (e) { console.log(e) }) }}

조각화되지 않은 파일: 폴더에 있는 총 파일 수를 기준으로 폴더에 있는 각 파일의 비율을 계산합니다. 파일이 성공적으로 업로드되면 폴더 프로세스를 수정합니다.

조각난 파일: 파일 내 각 파일의 비율을 계산한 후 각 파일이 성공적으로 업로드된 후 폴더의 프로세스를 수정합니다.

서버가 응답 헤더를 설정할 때

Access-Control-Allow-Origin: 요청한 웹페이지와 일치하고 *일 수 없는 명확한 도메인 이름을 지정해야 합니다. 액세스 제어 허용 자격 증명: true

요청 헤더를 설정합니다.

withCredentials:true

다시 채우다:

substr(start [, length ])는 지정된 위치에서 시작하여 지정된 길이의 하위 문자열을 반환합니다.

시작: 필수 옵션입니다. 원하는 하위 문자열의 시작 위치입니다. 문자열의 첫 번째 문자의 인덱스는 0입니다.

길이: 선택사항. 반환된 하위 문자열에 포함되어야 하는 문자 수입니다.

substring은 String 객체의 지정된 위치에 있는 하위 문자열을 반환합니다. 처음부터 끝까지(끝 제외) 하위 문자열을 포함하는 문자열을 반환합니다.

start: 부분 문자열의 시작 위치를 나타내며 인덱스는 0부터 시작합니다.

end: 하위 문자열의 끝 위치를 나타내며 인덱스는 0부터 시작합니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.