Vue實現(xiàn)帶進度條的文件拖動上傳功能
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 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>
<div id="app" class="m-5">
<div class="dropbox p-3">
<h2 class="text-center">把要上傳的文件拖動到這里</h2>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {},
methods: {},
mounted: function () {}
});
</script>
</body>
</html>
2. 檢測拖動事件
首先讓頁面支持文件拖拽，在 Vue 的 mounted() 函數(shù)中添加代碼：
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);
}
當把文件拖動到瀏覽器的拖動區(qū)域時，會觸發(fā)三種事件：
- 文件第一次進入拖動區(qū)時，觸發(fā) dragenter 事件
- 文件在拖動區(qū)來回拖拽時，不斷觸發(fā) dragover 事件
- 文件已經(jīng)在拖動區(qū)，并松開鼠標時，觸發(fā) drop 事件
實現(xiàn)拖動上傳，我們只需要關心 drop 事件。不過另外兩個事件也需要監(jiān)聽，目的是阻止瀏覽器默認行為。如果不阻止，那么把文件拖到瀏覽器時，瀏覽器就會自動下載這個文件（默認行為），drop 事件觸發(fā)不出來。
事件的監(jiān)聽函數(shù)添加在 Vue 的 methods 對象中：
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() 函數(shù)中，通過 e.dataTransfer.files 可以拿到用戶拖動到瀏覽器的文件的基本信息，uploadFile() 函數(shù)現(xiàn)在只這些信息打印了出來，可以了解到，拖動到瀏覽器的每個文件都是一個 File 對象：
3. 處理拖動事件
現(xiàn)在，我們要給 uploadFile() 函數(shù)增加功能，實現(xiàn)拖動文件時，拖動區(qū)出現(xiàn)文件名和一個上傳進度條。
首先在 Vue 的 data 對象中定義 files 屬性，用來保存所有拖動到瀏覽器中文件的名稱。然后在uploadFile() 函數(shù)每當被調(diào)用時，把文件名和上傳進度保存到 files 中：
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
},
}
上傳進度的功能在后面再介紹，先寫一個固定值。
相應地，在HTML代碼中，用 v-for 關鍵字顯示 files 的每一項：
<div class="dropbox p-3">
<h2 class="text-center">把要上傳的文件拖動到這里</h2>
<div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></div>
</div>
</div>
</div>
而且，“把要上傳的文件拖動到這里” 的提示只在拖動區(qū)沒有文件的時候才顯示：
<h2 v-if="files.length===0" class="text-center">把要上傳的文件拖動到這里</h2>
這樣，拖動效果就有了：
4. 文件上傳
接下來實現(xiàn)真正的文件上傳，繼續(xù)往 uploadFile() 函數(shù)添加代碼：
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方式發(fā)送給PHP端。PHP端代碼：
if (isset($_FILES['myFile'])) {
move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
echo 'OK';
} else {
echo 'No file specified';
}
現(xiàn)在刷新下頁面，把電腦上的兩個文件拖到瀏覽器中，PHP端會接收并保存文件到 uploads 目錄：
提示：如果拖放時遇到PHP返回了No file specified，或者 $_FILES 為 NULL 的情況時，有可能是PHP限制了POST請求最大字節(jié)，或者限制了上傳文件的體積。這時候需要調(diào)整下php.ini中的這兩個配置：
post_max_size = 20M // POST請求的最大字節(jié)數(shù) upload_max_filesize = 20M // 上傳文件的最大體積
進度條的展示
基本的上傳功能完成了，最后我們來完成進度條。每當AJAX請求發(fā)送了一段時間的數(shù)據(jù)時，都會生成一個 progress 事件，我們可以監(jiān)聽 progress 事件來知道當前的上傳進度：
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發(fā)送了多少字節(jié)，e.total 代表AJAX總共要發(fā)送多少字節(jié)。通過這兩個屬性可以計算上傳進度的百分比。
這樣，一個帶進度條的文件拖動上傳功能就完成了。
附：完整代碼
<!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 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>
<div id="app" class="m-5">
<div class="dropbox p-3">
<h2 v-if="files.length===0" class="text-center">把要上傳的文件拖動到這里</h2>
<div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></div>
</div>
</div>
</div>
</div>
<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>
總結(jié)
以上所述是小編給大家介紹的Vue實現(xiàn)帶進度條的文件拖動上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
在本篇文章里小編給大家整理的是一篇關于Vue組件中使用防抖和節(jié)流實例分析內(nèi)容，有需要的朋友們可以學習參考下。2021-11-11
Vue 2閱讀理解之initRender與callHook組件詳解
這篇文章主要為大家介紹了Vue 2閱讀理解之initRender與callHook組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在開發(fā)中我們常常會碰到這種業(yè)務,有一些數(shù)據(jù)需要在前端進行刪除,這篇文章主要給大家介紹了關于vue動態(tài)添加行/刪除行的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue組件中props與data的結(jié)合使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題
這篇文章主要介紹了Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue el-upload上傳文件的示例代碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應用的基礎,假設你正在創(chuàng)建一個網(wǎng)頁應用,它包括主頁、營銷頁面和應用頁面,你不會想要為每一頁重復所有的工作,對吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔心,這里將向你展示3種簡單的方法來實現(xiàn)這一點,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue項目實現(xiàn)換膚功能的一種方案分析，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03
本篇文章主要介紹了關于vue.js組件數(shù)據(jù)流的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07