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.首先导入axios （不一定非要导入，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.拖拽事件两个方法的实现
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.上传文件 及文件验证
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();//通过axios传输来生成进度条数据（ajax也是一样的哦大坏蛋）
},
6.当文件长度发生改变的时候传值给父组件（这一块好像还没考虑完善，完善了继续更新，将就着看吧）
watch: {
'files.length':{
handler(newValue,oldValue){
console.log(newValue);
this.$emit('getFiles',this.$data.files);
},
deep:true,
}
},
7.父组件向子组件传递的参数
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>
执行效果
image.png
记得父组件要引用一下该组件哦，或者你在props处初始化一下数据就能成功啦
该文章同时参考了一个同学的文章，但是一下忘记保存链接了，如有发现请联系我：这里当然是你链接的位置啦(⊙o⊙)OAO
