<el-dialog
title="上传文件"
:visible.sync="upload_flag"
custom-class='dialogClass'
width="30%">
<div>
<el-cascader
v-model="filePath"
style="width: 200px"
:options="pathData"
:props="{children:'children',label:'name',value:'id',expandTrigger: 'hover', }"
clearable
ref="checkedRef"
placeholder="请选择上传路径"
></el-cascader>
</div>
<div>
<el-upload
:limit=limitNum
:auto-upload="false"
:multiple="true"
action='http://192.168.1.107:9000/pm-projectManage/file/uploadFileInfo'
style='display: inline-block;margin-left: 10px;height: 200px;'
accept=".txt,.xlsx,.xls,.jpg,.jpeg,.png,.doc,.docx,.pdf"
:show-file-list='true'
:action="UploadUrl()"
@before-upload="beforeUploadFile"
:on-change="fileChange"
:on-exceed="exceedFile"
:on-success="handleSuccess"
:on-error="handleError"
:on-remove='removeFile'
:file-list="fileList">
<el-button size="small" type="primary" style='width: 100px;height: 40px;margin-top: 20px;'>选择文件</el-button>
</el-upload>
</div>
<el-button size="small" type="success" @click="uploadFile" v-prevent-re-click style='width: 100px;height: 40px;position: absolute;right: -25px;bottom: 20px;transform: translateX(-50%)'>确认上传</el-button>
</el-dialog>
<!--查看凭据抽屉-->
<div>
<el-drawer
title="查看凭据"
:visible.sync="lookCredentialVisible"
:before-close="lookCredentialClose"
>
<ul class="ul">
<li v-for='(item,index) in filesData' :key='index' :name='index'>
<div>
<i :class='item.name ? "el-icon-folder" : "el-icon-document"' style='font-size: 25px;margin-left: 10px; color: #6FCEFB;'></i>
<span style='margin-left: 10px;font-size: 16px;'>{{ item.name ? item.name : item.fileName }}</span>
</div>
<div>
<el-button type='danger' @click='deleteFile(item)' size="small">删除文件</el-button>
<el-button type='warning' @click='lookFileBtn(item)' size="small">查看文件</el-button>
<el-button type='success' v-if='!!item.fileName' @click='downLoadBtn(item)' size="small">下载文件</el-button>
</div>
</li>
</ul>
</el-drawer>
</div>
<!-- pdf文件预览对话框 -->
<div>
<el-drawer
title="文件预览"
:visible.sync="lookVisible"
style='text-align: center;'
:direction="direction">
<pdf
:src='src'
class='scroll'
style='width: 100%;'
:page='currentPage'
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler"
@progress="loadedRatio = $event"
@num-pages="pageCount=$event"
></pdf>
<div>
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
<el-button size="mini" type="text" style="margin-left: 5px;margin-right: 5px;">{{ currentPage }} / {{ pageCount }}</el-button>
<el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
</div>
</el-drawer>
</div>
data(){
return{
//文件上传部分
limitNum:10,
fileList:[],
addFilesId:'',
updateFilesId:'',
upload_flag:false,
filePath:"",
pathData:[],
lookCredentialVisible:false,//查看凭据
filesData:[],//凭据表
src:'',//pdf文件预览地址
lookVisible:false,
currentPage:1,//pdf页码
pageCount: 1, // pdf页面总页数
loadedRatio: 0,//当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
direction: 'ltr', // 抽屉从右往左打开
zIndex: 0,//图片预览
}
},
上传文件
UploadUrl:function(){
// 因为action参数是必填项,我们使用二次确认进行文件上传时,直接填上传文件的url会因为没有参数导致api报404,所以这里将action设置为一个返回为空的方法就行,避免抛错
return ""
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
beforeUploadFile(file) {
console.log('098989')
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
let size = file.size / 1024 / 1024;
console.log(size)
if (extension !== 'doc' || extension !== 'docx' || extension !== 'pdf') {
this.$message.warning('只能上传后缀是.doc 或者 .docx 或者 .pdf 的文件 或者其它');
}
if (size > 30) {
this.$message.warning('文件大小不得超过30M');
}
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
this.fileList.push(file.raw) ;
},
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
this.$message.warning(`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length + fileList.length} 个`);
},
// 文件上传成功时的钩子
handleSuccess(res, file, fileList) {
this.$message.success('文件上传成功');
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
this.$message.error('文件上传失败');
},
// 移除文件列表时的钩子
removeFile(file, fileList) {
let index = this.fileList.findIndex(item => {
return item.uid == file.uid;
})
this.fileList.splice(index, 1);
this.$message.info('移除文件成功!')
},
//上传文件
async uploadFile() {
if (this.fileList.length === 0){
this.$message.warning('请上传文件');
}else {
let form = new FormData();
for (let item of this.fileList) {
form.append('files', item)
}
console.log('form',form)
if(typeof this.filePath!='number'){
this.filePath=this.filePath[this.filePath.length-1]
}
this.$axios({
method:'post',
url: 'pm-projectManage/file/uploadFileInfo',
headers: {
// 'Content-Type': `multipart/form-data;boundary=${new Date().getTime()}`
'Content-type': 'multipart/form-data;boundary=${new Date().getTime()}'
},
params:{
folderId:this.filePath
},
data:form
}).then(res=>{
if(res.data.code===200){
this.addFilesId=res.data.data.toString();
this.upload_flag=false;
this.$swal.fire({
title:'上传成功',
timer:2000,
icon:'success'
})
this.fileList=[];
}else {
this.$swal.fire({
title:res.data.message,
icon:'warning',
showConfirmButton:true
})
this.fileList=[];
}
})
}
},
下载文件
//下载文件
async downLoadBtn(data){
let res = await this.$axios({
method: 'post',
url: 'pm-projectManage/file/getFileInfo',
responseType: "blob",
headers:{
'Content-Type': 'application/json'
},
params: {
id: data.id,
isOnLine: false
}
})
let blob = new Blob([res.data])
let a_link = document.createElement('a');
// 设置下载文件名
a_link.download = data.fileName;
a_link.style.display = 'none';
a_link.href = URL.createObjectURL(blob)
document.body.appendChild(a_link);
a_link.click();
document.body.removeChild(a_link);
},
在线预览文件
// pdf加载时
loadPdfHandler (e) {
this.currentPage = 1 // 加载的时候先加载第一页
},
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage (val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--
// console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
// console.log(this.currentPage)
}
},
// 上一页
prePage() {
let page = this.currentPage
page = page > 1 ? page - 1 : this.pageCount
this.currentPage = page
},
// 图片加载成功后的回调
success_load() {
this.zIndex = 10000000000;
},
// 下一页
nextPage() {
let page = this.currentPage
page = page < this.pageCount ? page + 1 : 1
this.currentPage = page
},
//查看文件
async lookFileBtn(data){
const extFolider = ['doc', 'docx', 'xls', 'xlsx', 'pdf'];
let extArray = ['jpg', 'jpeg', 'png', 'gif'];
let ext = data.fileName.split('.').pop();
if (extArray.includes(ext)) {
this.srcList = [];
let res = await this.$axios({
method: 'post',
url: 'pm-projectManage/file/getFileInfo',
responseType: "blob",
headers:{
'Content-Type':"application/json;charset=UTF-8"
},
params: {
id: data.id,
isOnLine: true
}
})
let blob;
switch(ext) {
case 'jpg':
blob = new Blob([res.data], {
type: "image/jpg"
})
this.img_dialogVisible = true;
this.imgSrc = URL.createObjectURL(blob)
if (this.srcList.length > 0) {
for (let data of this.srcList) {
if (data === this.imgSrc) return
}
} else {
this.srcList.push(URL.createObjectURL(blob))
}
break;
case 'jpeg':
blob = new Blob([res.data], {
type: "image/jpeg"
})
this.img_dialogVisible = true;
this.imgSrc = URL.createObjectURL(blob)
this.srcList.push(URL.createObjectURL(blob))
break;
case 'png':
blob = new Blob([res.data], {
type: "image/png"
})
this.img_dialogVisible = true;
this.imgSrc = URL.createObjectURL(blob)
this.srcList.push(URL.createObjectURL(blob))
break;
case 'gif':
blob = new Blob([res.data], {
type: "image/gif"
})
this.img_dialogVisible = true;
this.imgSrc = URL.createObjectURL(blob)
this.srcList.push(URL.createObjectURL(blob))
break;
default: console.log('未知类型文件!')
}
} else if(extFolider.includes(ext)) {
this.lookVisible = true;
let res = await this.$axios({
method: 'post',
url: 'pm-projectManage/file/getFileInfo',
params: {
id: data.id,
isOnLine: true
},
headers: {
'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
},
responseType: 'blob'
})
console.log(res)
let url = this.getObjectURL(res.data)
this.src = url;
} else {
this.$message.warning('请下载文件进行查看!');
this.lookVisible = false;
}
},
// 将返回的流数据转换为url
getObjectURL(file) {
let url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
try {
url = window.webkitURL.createObjectURL(file);
} catch (error) {
}
} else if (window.URL != undefined) { // mozilla(firefox)
try {
url = window.URL.createObjectURL(file);
} catch (error) {
}
}
return url;
},
删除文件
//删除文件
deleteFile(data){
//获取文件后缀名
let hzName=data.fileName.substring(data.fileName.lastIndexOf(".")+1);
//console.log(data.id)
let extArray = ['pdf', 'doc', 'docx']
if(data.fileName){
if (extArray.includes(hzName)) {
this.$swal
.fire({
title: '确定删除吗?',
text: '您将无法恢复被删除的数据!',
icon: 'warning',
showConfirmButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: '确定删除',
reverseButtons: true,
showCancelButton: true,
cancelButtonText: '取消',
cancelButtonColor: '#C1C1C1'
}).then(async result=>{
if (result.isConfirmed) {
//删除的服务器文件
let res = await this.$axios({
method: 'post',
url: 'pm-projectManage/file/deleteFile',
params: {
ids: data.id
}
})
console.log(res)
if (res.data.code === 200) {
await this.$swal.fire({
icon: 'success',
title: res.data.message,
timer: 2000
})
this.detailShow=false;
} else {
await this.$swal.fire({
icon: 'error',
title: res.data.message,
showConfirmButton: true
})
}
let res2 = await this.$axios({
method: 'post',
url: 'pm-projectManage/contract/deleteFile',
data: {
id: this.contractId,
fileId:data.id
}
})
}else {
return
}
})
}
}
},