<template>
<div>
<input ref="file" id="fileList" class="noDisplay" type="file" multiple @change="getFile" />
<table>
<colgroup>
<col width="5%" />
<col width="10%" />
<col width="70%" />
<col width="15%" />
</colgroup>
<tr>
<td colspan="2">
<label for="fileList" class="fileBtn">addFile</label>
</td>
<td colspan="2">
<button class="uploadBtn" @click="deleteFile">删除文件</button>
<button class="uploadBtn" @click="submitAddFile">点击上传</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" v-model="selectAll" />
</td>
<td>序号</td>
<td>文件名</td>
<td>文件大小</td>
</tr>
<tr v-for="(item,i) in fileList" :key="i">
<td>
<input type="checkbox" :value="i" v-model="selectArr" />
</td>
<td>{{i+1}}</td>
<td>{{item.name}}</td>
<td>{{item.size | convertSize}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "uploader",
props:['fileData','config'],
data: function(){
return {
extList:[],
totalSize:0,
originalFileList:[],//通过file 添加的文件 存在这个list中
// fileList:[{name:"aaa.jpg",size:452110000,uniqueName:"001"},{name:"bbb.jpg",size:875410000,uniqueName:"002"},{name:"ccc.jpg",size:968510000,uniqueName:"003"}],
fileList:[], //用来展示的文件list
selectArr:[], // 选中的文件索引
selectAll:false, // 全选与否
deleteFileList:[] //删除的文件list,用来存储要删除的文件(已经上传到服务器上的)
}
},
created:function(){
this.extList = this.config.extList;
this.totalSize = this.config.totalSize;
this.fileList = this.fileData;
},
methods: {
getFile:function(event){
var files = event.target.files;
let extIsOk = true;
for(var i = 0;i<files.length;i++){
// 上传类型判断
var imgName = files[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1){
var ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase();
if (this.config.extList.indexOf(ext)<0){
extIsOk = false;
}else{
if (this.totalfileSize <= this.totalSize) {
if (!this.isDuplicate(files[i])) {
this.originalFileList.push(files[i]);
this.fileList.push(files[i]);
}
} else {
alert("文件总大小超过了"+(this.totalSize/1024/1024)+"MB")
}
}
}else{
extIsOk = false;
}
}
if (!extIsOk) {
alert("上传的文件格式不符合!")
}
//解决上传同一个文件,change 事件不触发的问题
this.$refs.file.value = null;
},
submitAddFile:function(){
let app = this;
if(0 == this.originalFileList.length){
alert("请选择要上传的文件")
return;
}
var formData = new FormData();
for(var i=0;i<this.originalFileList.length;i++){
formData.append('fileList',this.originalFileList[i]);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data',
}
};
axios.post("localhost:8081/fileupload2",formData,config)
.then((response) => {
if(response.data=="success"){
app.deleteRemoteFile();
}
});
},
deleteFile:function(){
let app = this;
let newList = [];
app.fileList.forEach(function (item, i) {
console.log(typeof app.selectArr[i]);
if (app.selectArr.indexOf(i) < 0) {
//没被选择的文件是要保留的文件
newList.push(item);
} else {
//记录要删除的已经上传过的附件
if (item.uniqueName) {
app.deleteFileList.push(item);
}
}
});
app.fileList = newList;
app.selectArr.splice(0);
},
deleteRemoteFile: function () {
if (this.deleteFileList.length == 0) {
alert("上传成功!")
return
}
let paramObj = {fileList:this.deleteFileList};
axios.post("localhost:8081/deleteFile",paramObj)
.then((response) => {
if(response.data=="success"){
alert("上传成功!")
}
})
},
isDuplicate:function(file){
let duplicate = false;
this.fileList.forEach(function (item,i) {
if (file.name == item.name && file.size == item.size) {
alert(file.name+"已经存在!")
duplicate = true;
}
})
return duplicate;
}
},
computed: {
totalfileSize: function () {
let total = 0;
for (const file of this.fileList) {
total+= file.size;
}
return total;
}
},
watch: {
selectAll: function (newData,oldData) {
var app = this;
if (newData) {
this.fileList.forEach(function (item, i) {
app.selectArr[i] = i;
});
} else {
app.selectArr.splice(0);
}
}
},
filters:{
convertSize:function(val){
val = val/1024/1024;
return val.toFixed(2) + "MB";
}
}
};
</script>
<style lang='' scoped>
table {
width: 600px;
}
table tr td {
border: 1px solid darkgray;
border-radius: 5px;
}
.fileBtn {
cursor: pointer;
width: 20px;
height: 10px;
background-color: gainsboro;
}
.noDisplay {
display: none;
}
.uploadBtn {
float: right;
}
</style>