1.界面效果
image.png
頁面代碼,采用bootstrap UI框架 換成其他的也是一樣
<div class="dropbox p-3 row" >
<div class="col-3">
<b-button squared variant="outline-secondary" @click="$refs.file.click()" >
<i style="display:inline-block;width:100px;height:100px;font-size:100px" class="fa fa-plus"></i></br>
<span class="text-center">把要上傳的文件拖動到這里</span>
</b-button>
<input ref="file" type="file" @change="uploadFile($event.target.files[0])" :accept="fileType" style="display:none;"/>
</div>
<div class="col-9 ">
<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>
<button @click="removeFile(file)">移除</button>
</div>
</div>
</div>
js 代碼部分
1.首先導(dǎo)入axios （不一定非要導(dǎo)入，ajax也是一樣)
import axios from 'axios'
2.聲明data
data() {
return{
files: new Array(),//多個文件
fileSizeUnit:8.0*1024*1024,//MB
}
},
3.給dropbox 綁定拖拽事件
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);
}
事件解釋截圖并附上鏈接（https://www.runoob.com/jsref/event-ondragenter.html
）
image.png
4.拖拽事件兩個方法的實(shí)現(xiàn)
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]);
}
}
5.上傳文件 及文件驗(yàn)證
verifyFileOnUpload:function(file){//驗(yàn)證文件類型
if(file.size/this.$data.fileSizeUnit>this.fileSize){
alert("文件太大了OAO");
return false;
}
let str=this.fileType.split(",");
console.log(file.name.substring(file.name.lastIndexOf(".")));
console.log(str);
if(!(str.indexOf(file.name.substring(file.name.lastIndexOf(".").toString()))>-1)){
alert("嚶嚶嚶你的文件類型錯誤*-*");
return false;
}
return true;
},
uploadFile: function (file) {
if(!this.verifyFileOnUpload(file)){//文件驗(yàn)證
return;
}
var item = {
name: file.name,
uploadPercentage: 0
};
if(this.isMoreFiles){
this.files.push(item);
}else{
item.uploadPercentage=0;
this.files=[item];
}
var fd = new FormData();
fd.append('myFile', file);
var config = {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: function (e) {
item.uploadPercentage = (e.loaded/e.total)*100|0;
}
}
axios.post("/api/loginWithCookie",fd,config).then();//通過axios傳輸來生成進(jìn)度條數(shù)據(jù)（ajax也是一樣的哦大壞蛋）
},
6.當(dāng)文件長度發(fā)生改變的時候傳值給父組件（這一塊好像還沒考慮完善待错，完善了繼續(xù)更新籽孙，將就著看吧）
watch: {
'files.length':{
handler(newValue,oldValue){
console.log(newValue);
this.$emit('getFiles',this.$data.files);
},
deep:true,
}
},
7.父組件向子組件傳遞的參數(shù)
props:{
fileSize:0,
fileType:'',
isMoreFiles:false//文件為多個還是單個
},
最后完整代碼
<template>
<section>
<div class="dropbox p-3 row" >
<div class="col-3">
<b-button squared variant="outline-secondary" @click="$refs.file.click()" >
<i style="display:inline-block;width:100px;height:100px;font-size:100px" class="fa fa-plus"></i></br>
<span class="text-center">把要上傳的文件拖動到這里</span>
</b-button>
<input ref="file" type="file" @change="uploadFile($event.target.files[0])" :accept="fileType" style="display:none;"/>
</div>
<div class="col-9 ">
<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>
<button @click="removeFile(file)">移除</button>
</div>
</div>
</div>
</section>
</template>
<style lang="">
</style>
<script>
import axios from 'axios'
export default {
data() {
return{
files: new Array(),
fileSizeUnit:8.0*1024*1024,//MB
}
},
props:{
fileSize:0,
fileType:'',
isMoreFiles:false//文件為多個還是單個
},
watch: {
'files.length':{
handler(newValue,oldValue){
console.log(newValue);
this.$emit('getFiles',this.$data.files);
},
deep:true,
}
},
methods: {
removeFile:function(file){
let index=this.$data.files.indexOf(file);
if(index>-1){
this.$data.files.splice(index, 1);
}
},
verifyFileOnUpload:function(file){
if(file.size/this.$data.fileSizeUnit>this.fileSize){
alert("文件太大了OAO");
return false;
}
let str=this.fileType.split(",");
console.log(file.name.substring(file.name.lastIndexOf(".")));
console.log(str);
if(!(str.indexOf(file.name.substring(file.name.lastIndexOf(".").toString()))>-1)){
alert("嚶嚶嚶你的文件類型錯誤*-*");
return false;
}
return true;
},
uploadFile: function (file) {
if(!this.verifyFileOnUpload(file)){
return;
}
var item = {
name: file.name,
uploadPercentage: 0
};
if(this.isMoreFiles){
this.files.push(item);
}else{
item.uploadPercentage=0;
this.files=[item];
}
var fd = new FormData();
fd.append('myFile', file);
var config = {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: function (e) {
item.uploadPercentage = (e.loaded/e.total)*100|0;
}
}
axios.post("/api/loginWithCookie",fd,config).then();
},
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>
執(zhí)行效果
image.png
記得父組件要引用一下該組件哦，或者你在props處初始化一下數(shù)據(jù)就能成功啦
該文章同時參考了一個同學(xué)的文章火俄，但是一下忘記保存鏈接了犯建，如有發(fā)現(xiàn)請聯(lián)系我：這里當(dāng)然是你鏈接的位置啦(⊙o⊙)OAO
