Vue에서 진행률 표시줄을 사용하여 파일 드래그 및 업로드 기능을 구현하는 방법
- 亚连원래의
- 2018-06-05 11:52:082351검색
이 글에서는 주로 진행률 표시줄을 사용하여 파일 드래그 및 업로드 기능을 소개합니다. 이 글에서는 예제 코드를 통해 매우 자세하게 소개하고 있으며 도움이 필요한 친구들이 참고할 수 있습니다.
1. 기본 인터페이스
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
</style>
<title>Document</title>
</head>
<body>
<p id="app" class="m-5">
<p class="dropbox p-3">
<h2 class="text-center">把要上传的文件拖动到这里</h2>
</p>
</p>
<script>
new Vue({
el: '#app',
data: {},
methods: {},
mounted: function () {}
});
</script>
</body>
</html>
2. 드래그 이벤트 감지
먼저 페이지가 파일 드래그를 지원하도록 하고 Vue의 Mounted() 함수에 코드를 추가하세요.
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}파일을 브라우저로 드래그할 때 영역을 드래그하면 세 가지 이벤트가 트리거됩니다.
파일이 처음 드래그 영역에 들어갈 때 dragenter 이벤트가 트리거됩니다.
파일을 드래그 영역에서 앞뒤로 드래그하면 dragover 이벤트가 계속 발생합니다
파일이 이미 드래그 영역에 있고 마우스를 놓으면 드롭 이벤트가 발생합니다
드래그 및 업로드를 구현하려면 드롭 이벤트만 신경 쓰면 됩니다. 그러나 브라우저의 기본 동작을 방지하려면 다른 두 이벤트도 모니터링해야 합니다. 차단되지 않은 경우 파일을 브라우저로 드래그하면 브라우저가 자동으로 파일을 다운로드하고(기본 동작) 드롭 이벤트가 트리거되지 않습니다.
Vue의 메소드 객체에 이벤트 청취 기능이 추가되었습니다:
methods: {
uploadFile: function (file) {
console.log(file);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},onDrop() 함수, e.dataTransfer.files를 통해 사용자가 브라우저로 드래그한 파일의 기본 정보인 uploadFile() 함수를 얻을 수 있습니다. 이제 이 정보만 인쇄되며 브라우저에 드래그된 각 파일이 File 객체라는 것을 알 수 있습니다.
3. 드래그 이벤트를 처리합니다.
이제 uploadFile()을 수행해야 합니다. 파일을 드래그하면 드래그 영역에 파일 이름과 업로드 진행률 표시줄이 나타나는 것을 인식하는 기능이 추가되었습니다.
먼저 Vue의 데이터 객체에 파일 속성을 정의하여 브라우저로 드래그한 모든 파일의 이름을 저장합니다. 그런 다음 uploadFile() 함수가 호출될 때마다 파일 이름을 저장하고 진행률을 파일에 업로드합니다.
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
},
}업로드 진행률 함수는 나중에 도입될 예정이므로 먼저 고정 값을 작성합니다.
따라서 HTML 코드에서 v-for 키워드를 사용하여 파일의 각 항목을 표시합니다.
<p class="dropbox p-3">
<h2 class="text-center">把要上传的文件拖动到这里</h2>
<p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<p class="progress">
<p class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></p>
</p>
</p>
</p>또한 "여기에 업로드할 파일을 드래그하세요"라는 프롬프트는 드래그 영역에 파일이 없는 경우에만 나타납니다. 쇼:
61acfbb27c594130a9ef070c60b2bec1업로드할 파일을 여기에 드래그하세요2e9b454fa8428549ca2e64dfac4625cd
이렇게 하면 드래그 효과는 다음과 같습니다.
4 파일 업로드
다음으로 실제 업로드를 실현합니다. 파일을 업로드하려면 계속해서 uploadFile() 함수에 코드를 추가하세요.
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.send(fd);
},FormData가 여기에서 사용되며, 업로드할 파일이 FormData에 첨부되고 AJAX를 통해 PHP 측으로 전송됩니다. PHP 측 코드:
if (isset($_FILES['myFile'])) {
move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
echo 'OK';
} else {
echo 'No file specified';
}이제 페이지를 새로 고치고 컴퓨터에 있는 두 파일을 브라우저로 드래그하세요. PHP 측에서는 파일을 받아 업로드 디렉터리에 저장합니다.
팁: 드래그할 때 PHP가 발견되는 경우 지정된 파일이 반환되지 않거나 $_FILES가 NULL인 경우 PHP가 POST 요청의 최대 바이트를 제한하거나 업로드된 파일의 크기를 제한할 수 있습니다. 이때 php.ini에서 다음 두 가지 구성을 조정해야 합니다.
post_max_size = 20M // POST请求的最大字节数 upload_max_filesize = 20M // 上传文件的最大体积
진행률 표시줄 표시
기본 업로드 기능이 완료되고 마지막으로 진행률 표시줄이 완성됩니다. AJAX 요청이 일정 기간 동안 데이터를 보낼 때마다 진행 이벤트가 생성됩니다. 진행 이벤트를 수신하여 현재 업로드 진행 상황을 알 수 있습니다.
uploadFile: function (file) {
...
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},e.loaded는 현재 AJAX에서 보낸 바이트 수를 나타냅니다. e.total은 AJAX를 나타냅니다. 총 전송할 바이트 수입니다. 이 두 가지 속성을 사용하면 업로드 진행률을 계산할 수 있습니다.
이렇게 하면 진행 표시줄이 있는 파일 드래그 및 업로드 기능이 완성됩니다.
첨부 파일: 전체 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
</style>
<title>Document</title>
</head>
<body>
<p id="app" class="m-5">
<p class="dropbox p-3">
<h2 v-if="files.length===0" class="text-center">把要上传的文件拖动到这里</h2>
<p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<p class="progress">
<p class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></p>
</p>
</p>
</p>
</p>
<script>
new Vue({
el: '#app',
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 0
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}
});
</script>
</body>
</html>위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
요소 UI에서 대화 상자 el-dialog 닫기 이벤트에 대해(자세한 튜토리얼)
위 내용은 Vue에서 진행률 표시줄을 사용하여 파일 드래그 및 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!