代码块
<template>
<div class="management">
<h3 class="manage-title">附件简历管理</h3>
<ul class="pdf-list">
<li class="list-item" v-for="item in fileList" :key="item.att_id">
<div class="enclosure-name title-nowrap" @click="preview(item, item.att_type)">{{ item.name }}</div>
<span class="list-shanchu iconfont icon-shanchu" @click="onDel(item.att_id)"></span>
</li>
<div class="up-enclosure-but">
<el-button @click="onUploadResume">上传附件简历</el-button>
</div>
</ul>
<el-dialog
:visible.sync="uploadResume"
width="370px"
center
custom-class="preview-dialog"
:before-close="uploadResumeClose"
>
<div class="up-enclosure-but enclosure-but-bar">
<div class="preview-center" @dragover="fileDragover" @drop="fileDrop">
<div v-if="fileName" class="file-name">{{ fileName }}</div>
<div v-else>
<h4 class="title-bar">拖拽文件到这里</h4>
<p class="center-text">简历建议使用PDF文件,也支持PPT、DOC、DOCX 格式,文件大小不超过8M</p>
</div>
<input
type="file"
ref="evfile"
@change="zh_uploadFile_change"
style="display: none"
accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/png,image/jpeg"
/>
</div>
<el-progress :percentage="percent" v-if="loading"></el-progress>
<el-button @click="onUpload">上传附件简历</el-button>
</div>
</el-dialog>
<el-dialog
title="文件预览"
:visible.sync="dialogVisible"
width="1100px"
top="10vh"
:fullscreen="false"
custom-class="preview-dialog"
:before-close="handleClose"
>
<iframe
:src="fileData"
frameborder="0"
style="width: 100%; height: 560px"
></iframe>
</el-dialog>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import printJS from "print-js";
import Pdf from "vue-pdf";
import utils from "@/utils/index.js";
import axios from "axios";
import * as qiniu from "qiniu-js";
import {
saveUserResumeAtt,
userResumeAttRemove,
userResumeAttList,
} from "@/api/public";
import { extend } from 'dayjs';
export default {
components: {
Pdf,
},
data() {
return {
fileList: [],
dialogVisible: false,
uploadResume: false,
src: "",
fileData: "",
loading: false,
percent:0,
fileName: '',
filedropShow: false
};
},
created() {
this.getUserResumeAttList()
},
methods: {
uploadResumeClose() {
this.uploadResume = false
},
onUploadResume () {
if (this.fileList.length < 3) {
this.uploadResume = true
} else {
this.$message({
message: '附件简历最多只能上传三个',
type: 'warning'
})
}
},
// 预览
preview(item, type) {
// this.src = Pdf.createLoadingTask(item.att_dir);
this.dialogVisible = true;
let wordUrl = 'http://xxxxx'
if (type === 'doc' || type === 'docx') {
this.fileData = wordUrl + item.att_dir
// this.fileData = wordUrl
console.log(this.fileData)
} else if (type === 'pdf' || type === 'PDF') {
this.fileData = 'http://'+item.att_dir
console.log('文件路径',this.fileData)
}
},
// 关闭弹框
handleClose() {
this.src = "";
this.dialogVisible = false;
},
// 打印
print() {
console.log(this.$refs.myPdf);
this.$refs.myPdf && this.$refs.myPdf.print();
},
// 转图片之后打印
printImg() {
html2canvas(this.$refs.printContent, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
}).then((canvas) => {
const url = canvas.toDataURL();
printJS({
printable: url,
type: "image",
documentTitle: this.printName,
});
// console.log(url)
});
},
// 上传附件
onUpload() {
this.$refs.evfile.click();
},
zh_uploadFile_change(evfile) {
let file = {}
if (this.filedropShow) {
file = evfile.dataTransfer.files[0] //Blob 对象,上传的文件
}
// console.log('上传',evfile.target.files[0])
this.loading = true
axios.post('http://xxxxx').then(res=>{
if (!this.filedropShow) {
file = evfile.target.files[0] //Blob 对象,上传的文件
}
var uptoken = res.data.data.upToken
let date = new Date()
let key = 'resume/'+date.valueOf()//dateFormat("YYYYmmddHHMM", date)+ran
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域
};
let putExtra = {
fname: "", //文件原文件名
params: {}, //用来放置自定义变量
mimeType: null, //用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
};
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
observable.subscribe({
next: (result) => {
// 主要用来展示进度
// console.log(result)
// this.$Loading.update(result.total.percent)
this.$set(this,'percent',Math.round(result.total.percent))
},
error: (errResult) => {
// 失败报错信息
this.$message({
message: '上传成功',
type: "error",
});
this.loading = false
this.$set(this,'percent',0)
if (!this.filedropShow) {
evfile.target.value = ''
}
},
complete: (result) => {
// this.$message({
// message: '上传成功',
// type: "success",
// });
this.filedropShow = false
this.uploadResume = false
this.loading = false
this.$set(this,'percent',0)
this.fileName = ''
if (!this.filedropShow) {
evfile.target.value = ''
}
let data = {
key: result.key,
file_name: file.name,
size: file.size,
};
this.onSaveUserResumeAtt(data);
}
})
})
},
// 保存上传附件简历
onSaveUserResumeAtt(data) {
saveUserResumeAtt(data).then((res) => {
if (res.status === 200) {
this.getUserResumeAttList()
this.$message({
message: res.msg,
type: "success",
});
}
}).catch(res => {
this.$message({
message: res.msg,
type: "error",
});
})
},
// 获取附件简历列表
getUserResumeAttList () {
userResumeAttList().then(res => {
if (res.status === 200) {
console.log('请求成功')
console.log(res.data)
this.fileList = res.data.data
}
})
},
// 删除附件简历
onDel(att_id) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// this.$message({
// type: 'success',
// message: '删除成功!'
// });
userResumeAttRemove(att_id).then(res => {
if (res.status === 200) {
this.getUserResumeAttList()
this.$message({
message: res.msg,
type: "success",
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 拖拽上传
fileDragover (e) {
e.preventDefault()
},
fileDrop (e) {
e.preventDefault()
const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
this.fileName = file.name
this.filedropShow = true
this.zh_uploadFile_change(e)
},
},
};
</script>
<style lang="less" scoped>
.management {
width: 100%;
background: #fff;
padding: 20px;
margin-bottom: 14px;
border-radius: 4px;
.manage-title {
font-size: 14px;
font-weight: 400;
color: #6E7483;
padding-bottom: 15px;
}
.pdf-list {
.list-item {
width: 261px;
height: 23px;
padding: 0 5px;
// background: #FFFFFF;
cursor: pointer;
font-size: 12px;
color: #6E7483;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.enclosure-name {
max-width: 220px;
}
&:hover {
box-shadow: 0px 0px 6px 2px rgba(161, 162, 164, 0.12);
}
.list-shanchu {
font-size: 14px;
color: #6E7483;
}
}
}
.preview-dialog {
height: 400px;
}
}
.up-enclosure-but {
padding-top: 11px;
.el-button {
width: 255px;
height: 38px;
background: #04C253;
border: 1px solid #FFFFFF;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
padding: 0;
letter-spacing: 1px;
&:hover {
background: #3cd37a;
border-color: #3cd37a;
}
}
}
.enclosure-but-bar {
padding-top: 0;
.el-button {
margin-top: 9px;
width: 317px;
}
.preview-center {
width: 317px;
height: 130px;
padding: 20px;
cursor: pointer;
border: 1px dashed #CBCFD2;
.center-text {
text-align: left;
font-size: 12px;
font-weight: 400;
color: #A8ABB1;
}
.file-name {
line-height: 73px;
text-align: center;
}
.title-bar {
text-align: center;
padding: 14px 0 26px 0;
font-size: 14px;
font-weight: 400;
color: #74777E;
}
}
}
</style>
核心原理说明
dragover和drop事件
第一个要说的就是拖拽中的这两个事件,因为这两个事件撑起了拖拽上传的核心功能。
对于拖拽这个动作而言,有二个核心概念,一个是拖拽元素,还一个是放置目标。这里,我只讲放置目标上的事件,对于拖拽元素的事件,请自行查阅。
那对于放置目标,它有什么事件呢?如下:
当某个元素被拖动到一个有效的放置目标上(如上例中虚线区域)时,下列事件会依次发生:
(1) dragenter
(2) dragover
(3) dragleave 或 drop
只要有元素被拖动到放置目标上,就会触发 dragenter 事件(类似于 mouseover 事件)。紧随其后的是 dragover 事件,而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。如果元素被拖出了放置目标,dragover 事件不再发生,但会触发 dragleave 事件(类似于 mouseout事件)。如果元素被放到了放置目标中,则会触发 drop 事件而不是 dragleave 事件。
对于本例来说,我们只需要关注dragover和drop事件。但是drop事件却有点调皮,你想监听它,还得进行一些处理,因为默认情况下,元素是不允许放置的,在拖动元素经过某些无效放置目标时,可以看到一种特殊的光标(圆环中有一条反斜线),表示不能放置。如下:
clipboard.png
如果拖动元素经过不允许放置的元素,那无论用户如何操作,都不会发生 drop 事件。那怎么办呢?
我们可以重写 dragover 事件的默认行为,如上例代码中的e.preventDefault()。
细心的同学可能要问了,那drop事件中也有e.preventDefault(),去掉行不行呢?大家可以自行试下。
dataTransfer 对象
可能这个对象看着有些陌生,但是它的作用可不小。比如,你拖动一个图片到目标区域,那目标区域怎么获取这个图片的信息呢?就靠它!它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。在本例中,我们可以通过它来获取拖动中的文件信息。
input的change事件
这个事件其实有坑的,它有这样一个特性,即:上传同一个文件,并不会触发change事件,即使该文件内容做过修改。
细思极恐!比如,用户要上传一个文档,但是拖拽到虚线区域后发现文档内容还需要修改下,他改完后再拖拽该文档,再提交到服务器,那么他上传到服务器的文档内容却是未修改之前的!
所以,我们需要代码e.target.value = ''来进行重置处理,这样,每次上传文件都会触发change事件。
注: 参考文章https://blog.csdn.net/weixin_34119545/article/details/88614771