一，基本界面
<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>點(diǎn)擊上傳</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>
二肥隆，監(jiān)聽拖動(dòng)事件事件
讓vue支持文件拖拽觉既，寫在vue的mounted:function(){},里面
將文件拖動(dòng)到區(qū)域（這里的區(qū)域就是你的div），監(jiān)聽區(qū)域拖動(dòng)事件
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
})
},
說(shuō)明：
1.文件第一次進(jìn)入拖動(dòng)區(qū)時(shí)絮记，觸發(fā) dragenter 事件
- 文件在拖動(dòng)區(qū)來(lái)回拖拽時(shí)，不斷觸發(fā)
dragover事件 - 文件已經(jīng)在拖動(dòng)區(qū)虐先，并松開鼠標(biāo)時(shí)怨愤，觸發(fā)
drop事件
4.文件在拖動(dòng)區(qū)來(lái)回拖拽時(shí)，不斷觸發(fā)dragleave事件 //拖后放
實(shí)現(xiàn)拖動(dòng)上傳蛹批，我們只需要關(guān)心 drop 事件撰洗。不過(guò)另外三個(gè)事件也需要監(jiān)聽篮愉，目的是阻止瀏覽器默認(rèn)行為。如果不阻止差导，那么把文件拖到瀏覽器時(shí)试躏，瀏覽器就會(huì)自動(dòng)下載這個(gè)文件（默認(rèn)行為，親們也可以親測(cè)一下）设褐，drop 事件觸發(fā)不出來(lái)颠蕴。
this.enentDrop函數(shù)寫在你的項(xiàng)目methods:{}里，監(jiān)聽事件會(huì)有文件回調(diào)e.dataTransfer
enentDrop() 函數(shù)現(xiàn)在只這些信息打印了出來(lái)助析，可以了解到犀被，拖動(dòng)到瀏覽器的每個(gè)文件都是一個(gè) File 對(duì)象：
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]); //創(chuàng)建一個(gè)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('提示','確定要?jiǎng)h除嗎',callback=>{
this.fileData.splice(index,1);
})
}
},
三，處理拖動(dòng)上傳文件
現(xiàn)在外冀，我們要給 uploadFile()函數(shù)增加功能寡键，實(shí)現(xiàn)拖動(dòng)文件時(shí)，拖動(dòng)區(qū)出現(xiàn)文件名和一個(gè)上傳文件名稱和進(jìn)度條锥惋。
首先在 Vue 的 data 對(duì)象中定義fileData 屬性昌腰，用來(lái)保存所有拖動(dòng)到瀏覽器中文件的名稱。然后在uploadFile()函數(shù)每當(dāng)被調(diào)用時(shí)膀跌，把文件名和上傳進(jìn)度保存到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]); //創(chuàng)建一個(gè)url連接,供src屬性引用
fileJson.Url = fileurl;
}else if(video_type){
let fileurl = window.URL.createObjectURL(file[i]); //創(chuàng)建一個(gè)url連接,供src屬性引用
}else{
alert("不支持此類型文件")
}
fileJson.fileText = file[i].name;
this.fileData.push(fileJson);
}
},
提示：這里攔截了一些文件類型，做了一些處理固灵，如果是上傳圖片和視頻需要預(yù)覽的可以使用
let fileurl = window.URL.createObjectURL(file[i]);
window.URL.createObjectURL了解作用是捅伤，請(qǐng)點(diǎn)擊 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
當(dāng)被調(diào)用時(shí)，把文件名巫玻，和預(yù)覽生成的路徑保存到j(luò)son里面丛忆，然后統(tǒng)一添加到fileData[ ]數(shù)組里面，實(shí)現(xiàn)上傳預(yù)覽仍秤。
data () {
return {
borderhover:false, //文件拖拖動(dòng)到區(qū)域的hover效果
imgArr:[],
fileData:[],
}
},
四熄诡，上傳到后臺(tái) 后續(xù)更新由于后臺(tái)還沒寫完接口，敬請(qǐng)期待...
