<template>
|
<div class="upload-file">
|
<transition-group name="el-zoom-in-center" class="upload-transition">
|
<div
|
v-for="item in fileList"
|
:key="item.id"
|
class="file-list"
|
@mouseenter="getClose(item)"
|
@mouseleave="setClose">
|
<div :class="{close_icon:close == item.id,close_icons: close != item.id}">
|
<el-tooltip class="item" effect="dark" content="删除文件" placement="right" v-if="!disabled">
|
<i class="el-icon-delete" @click="delectFile(item)"></i>
|
</el-tooltip>
|
</div>
|
<img src="../assets/p.jpg" class="file-img" v-if="item.type == 'pdf'">
|
<img src="../assets/ppt.png" class="file-img" v-if="item.type == 'pptx'||item.type == 'ppt'" >
|
<img src="../assets/w.jpg" class="file-img" v-if="item.type == 'doc'||item.type == 'docx'">
|
<img src="../assets/e.jpg" class="file-img" v-if="item.type == 'xls'||item.type == 'xlsx'">
|
<img src="../assets/t.png" class="file-img" v-if="item.type == 'txt'">
|
<el-tooltip class="item" effect="light" :content="item.name" placement="top">
|
<div class="img-text">{{item.name}}</div>
|
</el-tooltip>
|
</div>
|
<el-upload
|
:key="5762"
|
ref="upload"
|
class="upload"
|
:action="action"
|
:http-request="requestUpload"
|
:disabled="disabled"
|
:show-file-list="false"
|
:auto-upload="true"
|
:before-upload="beforeUpload"
|
:multiple="false">
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</transition-group>
|
<div class="upload-info">
|
<slot name="info"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import SparkMD5 from 'spark-md5';
|
export default {
|
name: "UploadFile",
|
props: {
|
fileList: {
|
type: Array,
|
default: () => {
|
let list = [];
|
return list;
|
}
|
},
|
disabled:Boolean,
|
limit:Boolean
|
},
|
data() {
|
return {
|
action: "upload/uploadSliceFile",
|
close: "",
|
formData: null,
|
fileMD5Str: "",
|
MD5Str: "",
|
loading: null,
|
fileNum: 0,
|
fileSize: 1048570,
|
}
|
},
|
methods: {
|
//出现删除样式
|
getClose(item) {
|
this.close = item.id
|
},
|
//去除删除样式
|
setClose() {
|
this.close = ""
|
},
|
//检查文件类型
|
checkFileType(name) {
|
let obj = {
|
"xls": true,
|
"xlsx": true,
|
"ppt": true,
|
"pptx": true,
|
"doc": true,
|
"docx": true,
|
"pdf": true,
|
}
|
return obj[name]
|
},
|
beforeUpload() {
|
if(this.limit) {
|
if(this.fileList.length === 1) {
|
this.$message.warning("仅能上传一个文件！")
|
return false
|
}
|
}
|
},
|
requestUpload(response) {
|
const list = response.file.name.split('.');
|
if(!this.checkFileType(list[list.length - 1])) {
|
this.$message.warning('请上传正确格式的文件！');
|
return false;
|
}
|
this.createLoadling()
|
const formData = new FormData();
|
formData.set('file', response.file);
|
this.$api.System.uploadFileRequest(formData).then((res) => {
|
if(res.success) {
|
this.$message.success('上传成功！');
|
this.$nextTick(() => {
|
this.fileList.push({
|
id: this.fileList.length + 1,
|
type: list[list.length - 1],
|
name: response.file.name,
|
url: res.data,
|
})
|
})
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
this.loading.close();
|
}).catch(() => {
|
this.loading.close();
|
this.$message.error('请检查网络连接后重新上传！');
|
})
|
},
|
// //自定义上传
|
// requestUpload(file) {
|
// let type = file.file.name.split(".")
|
// let bol = this.checkFileType(type[type.length - 1])
|
// if(!bol) {
|
// this.$message.warning("请上传正确格式的文件")
|
// return false
|
// }
|
// this.createLoadling()
|
// this.formData = new FormData()
|
// this.computedFileMD5(file.file)
|
// },
|
// //计算总的MD5值
|
// computedFileMD5(file) {
|
// let fileReader = new FileReader()
|
// fileReader.onload = (e) => {
|
// if(file.size != e.target.result.length) {
|
// this.$message.warning("请检查网络连接或稍后再试...")
|
// return false
|
// } else {
|
// this.fileMD5Str = SparkMD5.hashBinary(e.target.result)
|
// this.formData.set('fileName', file.name)
|
// this.formData.set('fileMD5Str', this.fileMD5Str)
|
// }
|
// this.sliceFile(file)
|
// }
|
// fileReader.readAsBinaryString(file)
|
// },
|
// //计算切片数量
|
// sliceFile(file) {
|
// this.fileNum = Math.ceil(file.size / this.fileSize)
|
// for(let i = 0;i < this.fileNum;i++) {
|
// setTimeout(() => {
|
// this.computedFileitem(i, file)
|
// },2000 * i)
|
// }
|
// },
|
// //计算每一片的MD5值
|
// computedFileitem(num, file) {
|
// let fileReader = new FileReader()
|
// let spark = new SparkMD5()
|
// fileReader.onload = (e) => {
|
// spark.append(e.target.result)
|
// if((num+1) === this.fileNum) {
|
// this.formData.set('isLast', true)
|
// } else {
|
// this.formData.set('isLast', false)
|
// }
|
// this.MD5Str = spark.end()
|
// this.formData.set('order', num)
|
// this.formData.set('MD5Str', this.MD5Str)
|
// //检查每片是否存在
|
// this.inspectFile()
|
// }
|
// let start = num * this.fileSize
|
// let end = (num * this.fileSize) + this.fileSize
|
// let files = file.slice(start, end)
|
// fileReader.readAsBinaryString(file.slice(start, end))
|
// this.formData.set('file', files)
|
// },
|
// //检查切片文件是否存在
|
// async inspectFile() {
|
// const {data } = await this.$api.CHIEF.CHECKFILL({
|
// fileMD5Str: this.fileMD5Str,
|
// sliceFileMD5Str: this.MD5Str
|
// })
|
// return data;
|
// // .then(res => {
|
// // if(res.sym === 'ok') {
|
// // if(!res.data.sliceFileExists) {
|
// // setTimeout(() => {
|
// // this.requestUploadFile()
|
// // },1000)
|
// // }
|
// // } else {
|
// // this.$message.warning("请检查网络连接或稍后再试...")
|
// // this.loading.close()
|
// // }
|
// // })
|
// // .catch(() => {
|
// // this.$message.warning("请检查网络连接或稍后再试...")
|
// // this.loading.close()
|
// // })
|
// },
|
// //上传每片文件
|
// requestUploadFile() {
|
// this.$api.CHIEF.SLICEUPLOADFILE(this.formData).then(res => {
|
// if(res) {
|
// if(res.data !== null) {
|
// if(res.data.uploadFileId) {
|
// const arr = res.data.fileOriginalName.split('.')
|
// this.fileList.push({
|
// id: res.data.uploadFileId,
|
// name: res.data.fileOriginalName,
|
// type: arr[arr.length - 1]
|
// })
|
// this.loading.close()
|
// this.$message.success("上传成功！")
|
// }
|
// }
|
// } else {
|
// setTimeout(() => {
|
// this.$message.warning("上传失败,请检查网络后在上传一次吧!")
|
// this.loading.close()
|
// },2000)
|
// }
|
// })
|
// .catch(() => {
|
// setTimeout(() => {
|
// this.loading.close()
|
// },2000)
|
// })
|
// },
|
//删除列表文件
|
delectFile(row) {
|
this.fileList.splice(this.fileList.findIndex(item => item.id == row.id),1);
|
this.$message.success("删除成功！")
|
this.$emit('update:fileList',this.fileList);
|
},
|
//加载动画
|
createLoadling() {
|
this.loading = this.$loading({
|
lock: true,
|
text: '正在上传中....',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.upload-file {
|
padding: 0 0 30px 0;
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
position: relative;
|
|
.upload-transition {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.file-list {
|
width: 100px;
|
height: 100px;
|
display: flex;
|
flex-direction: column;
|
margin: 10px 4px;
|
border-radius: 6px;
|
position: relative;
|
justify-content: space-around;
|
// background-color: #005CC5;
|
|
.file-img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.close_icon {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
cursor: pointer;
|
display: flex;
|
font-size: 30px;
|
color: #dfdfdf;
|
border-radius: 6px;
|
align-items: center;
|
justify-content: center;
|
background-color: rgba(0,0,0,.5);
|
}
|
|
.close_icons {
|
display: none;
|
}
|
|
.look-line {
|
width: 2px;
|
height: 30px;
|
margin: 0 10px;
|
background-color: #cccccc;
|
}
|
}
|
|
.upload {
|
width: 96px;
|
height: 96px;
|
display: flex;
|
margin: 10px 4px;
|
align-items: center;
|
justify-content: center;
|
border-radius: 4px;
|
position: relative;
|
border: 2px dashed #39B5FE;
|
}
|
|
.avatar-uploader-icon {
|
font-size: 34px;
|
color: #D8D8D8;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
}
|
|
.upload-info {
|
color: #828D9D;
|
position: absolute;
|
left: 6px;
|
bottom: -10px;
|
white-space:nowrap;
|
overflow: hidden;
|
text-align: center;
|
text-overflow: ellipsis;
|
}
|
}
|
|
.img-text {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
font-size: 14px;
|
position: absolute;
|
white-space:nowrap;
|
overflow: hidden;
|
text-align: center;
|
text-overflow: ellipsis;
|
bottom: -20px;
|
color: #dfdfdf;
|
}
|
</style>
|
