一，基本界面
<template>
<div>
<div style="width: 100%;">
<div class="drop_area mg-b-20 disFlex align-center hor-center" id="drop_area"
:style="{'border-color': (borderhover ? '#3d8cff':'#BBBBBB')}">
<div style="">将文件拖拽到此处,或</div>
<div>
<div class="font-blue pos-r cur-hand mg-l-10" style="top: 12px;"><i class="el-icon-upload mg-r-5"></i>点击上传</div>
<input type="file" accept="image/png,image/jpeg,image/gif" multiple class="input-upload cur-hand" @change ="getUpload($event)" /></div>
</div>
<div class="fileHtml">
<ul class="filelist">
<li v-for = "(item,index) in fileData" class="mg-b-20">
<div class="file-card">
<!-- <p> <img v-bind:src="item.Url" alt="" style="width: 300px;height: 300px;"></p>-->
<div class="disFlex align-center">
<div><i class="el-icon-document mg-r-10"></i>{{item.fileText}}</div>
<div class="mg-l-30 flex text-right mg-r-20"><span class="font-blue cur-hand">查看</span><span class="mg-l-15 font-blue cur-hand" @click="deleteFile(item,index)">删除</span></div>
</div>
</div>
<!-- <p><el-progress :percentage=item.progressStatl status="success"></el-progress></p>-->
</li>
</ul>
</div>
</div>
</div>
</template>
二，监听拖动事件事件
让vue支持文件拖拽，写在vue的mounted:function(){},里面
将文件拖动到区域（这里的区域就是你的div），监听区域拖动事件
mounted: function () {
let _this = this;
var dropbox = document.getElementById('drop_area');
dropbox.addEventListener("drop",this.enentDrop,false)
dropbox.addEventListener("dragleave",function (e) {
e.stopPropagation();
e.preventDefault();
_this.borderhover = false;
})
dropbox.addEventListener("dragenter",function (e) {
e.stopPropagation();
e.preventDefault();
_this.borderhover = true;
})
dropbox.addEventListener("dragover",function (e) {
e.stopPropagation();
e.preventDefault();
_this.borderhover = true
})
},
说明：
1.文件第一次进入拖动区时，触发 dragenter 事件
- 文件在拖动区来回拖拽时，不断触发
dragover事件 - 文件已经在拖动区，并松开鼠标时，触发
drop事件
4.文件在拖动区来回拖拽时，不断触发dragleave事件 //拖后放
实现拖动上传，我们只需要关心 drop 事件。不过另外三个事件也需要监听，目的是阻止浏览器默认行为。如果不阻止，那么把文件拖到浏览器时，浏览器就会自动下载这个文件（默认行为，亲们也可以亲测一下），drop 事件触发不出来。
this.enentDrop函数写在你的项目methods:{}里，监听事件会有文件回调e.dataTransfer
enentDrop() 函数现在只这些信息打印了出来，可以了解到，拖动到浏览器的每个文件都是一个 File 对象：
methods:{
enentDrop: function(e){
this.borderhover = false
e.stopPropagation();
e.preventDefault(); //必填字段
let fileData = e.dataTransfer.files;
console.log(fileData);
this.uploadFile(fileData)
},
uploadFile: function (file){ //渲染上传文件
for (let i = 0; i !== file.length; i++) {
let fileJson = {
Url:'',
progressStatl:0,
fileText:'',
};
let video_type=file[i].type == "video/mp4" || file[i].type == "video/ogg";
if(file[i].type.indexOf('image') === 0){ //如果是图片
let fileurl = window.URL.createObjectURL(file[i]); //创建一个url连接,供src属性引用
fileJson.Url = fileurl;
}else if(video_type){
alert("不支持此类型文件")
}else{
}
fileJson.fileText = file[i].name;
this.fileData.push(fileJson);
}
},
deleteFile:function (index){ //删除已选文件
this.$popup.open('提示','确定要删除吗',callback=>{
this.fileData.splice(index,1);
})
}
},
image.png
三，处理拖动上传文件
现在，我们要给 uploadFile()函数增加功能，实现拖动文件时，拖动区出现文件名和一个上传文件名称和进度条。
首先在 Vue 的 data 对象中定义fileData 属性，用来保存所有拖动到浏览器中文件的名称。然后在uploadFile()函数每当被调用时，把文件名和上传进度保存到fileJson.progressStatl 中：
uploadFile: function (file){ //渲染上传文件
for (let i = 0; i !== file.length; i++) {
let fileJson = {
Url:'',
progressStatl:0,
fileText:'',
};
let video_type=file[i].type == "video/mp4" || file[i].type == "video/ogg";
if(file[i].type.indexOf('image') === 0){ //如果是图片
let fileurl = window.URL.createObjectURL(file[i]); //创建一个url连接,供src属性引用
fileJson.Url = fileurl;
}else if(video_type){
let fileurl = window.URL.createObjectURL(file[i]); //创建一个url连接,供src属性引用
}else{
alert("不支持此类型文件")
}
fileJson.fileText = file[i].name;
this.fileData.push(fileJson);
}
},
提示：这里拦截了一些文件类型，做了一些处理，如果是上传图片和视频需要预览的可以使用
let fileurl = window.URL.createObjectURL(file[i]);
window.URL.createObjectURL了解作用是，请点击 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
当被调用时，把文件名，和预览生成的路径保存到json里面，然后统一添加到fileData[ ]数组里面，实现上传预览。
data () {
return {
borderhover:false, //文件拖拖动到区域的hover效果
imgArr:[],
fileData:[],
}
},
image.png
四，上传到后台 后续更新由于后台还没写完接口，敬请期待...
网友评论