root/pgserver3.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
annnj-company
2026-04-17 18:29:53 +08:00
parent e49fa5a215
commit 130c1026c4
5615 changed files with 1639145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

553
pgweb/src/components/upload/file-upload copy.vue Normal file
View File

@@ -0,0 +1,553 @@
<template>
<div>
<div class="zc-flex" v-if="uploadType == 'btnUpload'" style="justify-content: space-between;">
<template v-if="isImg===false"><!--表示其他非图片文件-->
<div class="div-left-flex">
<span v-for="(item,index) in uploadList" class="file" :key="index">
{{item.name}}
<Icon class="pl-10" type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
<Icon class="pl-10" type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
</span>
</div>
</template>
<template v-else>
<div class="attach-container images" v-viewer="{navbar:false,}" >
<div class="upload-container" style=" position: relative;">
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<template v-if="(item.status === 'finished') || !item.status">
<!-- 弹框展示 -->
<template v-if='isModal'>
<img :src="item.url ? item.url : item.response.data.url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
</div>
</template>
<!-- 默认展示 -->
<template v-else>
<img :src="item.url ? item.url : item.response.data.url" />
<Icon type="ios-close-circle-outline" @click.native="handleRemove(item,index)" class="close" size='22'/>
</template>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</div>
</div>
</template>
<div class="mt-10">
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="format || defaultFormat"
:max-size="$config.maxSize"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleUpload"
:on-progress="handleProgress"
multiple
type="drag"
name="pic"
:headers="uploadHeader"
:action="isUploadUrl == 'fbb'?$config.appUploadUrl:$config.uploadUrl"
>
<Button>上传附件</Button>
</Upload>
</div>
</div>
<div v-if="!uploadType">
<div class="attach-container">
<div class="upload-container">
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<template v-if="(item.status === 'finished') || !item.status">
<img :src="item.url ? item.url : item.response.data.url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</div>
</div>
<div class="zc-left mr-10">
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="format || defaultFormat"
:max-size="$config.maxSize"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleUpload"
:on-progress="handleProgress"
multiple
type="drag"
name="pic"
:headers="uploadHeader"
:action="isUploadUrl == 'fbb'?$config.appUploadUrl:$config.uploadUrl"
>
<div class="add-upload">
<Icon type="ios-add" size="20"></Icon>
</div>
</Upload>
</div>
</div>
<div class="attach-container images" v-viewer="{navbar:false,}" v-if="uploadType === 'showImg'" >
<div class="upload-container">
<div class="upload-list" v-for="(item,index) in haveUpload" :key="index">
<template>
<img :src="item.url ? item.url : item.response.data.url" />
<!-- <div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
</div> -->
</template>
</div>
</div>
</div>
<div class="images" v-viewer="{navbar:false,}" v-if="uploadType === 'showDraggable'">
<!-- <div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<img :src="item.url ? item.url : item.response.data.url" />
</div> -->
<draggable v-model="uploadList" @update="datadragEnd">
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<template v-if="(item.status === 'finished') || !item.status">
<img :src="item.url ? item.url : item.response.data.url" />
<!-- <div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
</div> -->
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</draggable>
</div>
<div v-if="uploadType === 'showImgName'" class="attach-container">
<span class="file_Img" v-for="(item,index) in haveUpload" :key="index">
{{item.name}}
<Icon style="padding-left: 5px;cursor: pointer;" type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
</span>
</div>
<div>
</div>
<div class="images" v-show="visible" v-viewer="{navbar:false,}">
<viewer :images="imagesList">
<img v-for="(src,i) in imagesList" :src="src" :key="`${i}src`" />
</viewer>
</div>
<!-- 弹框查看图片/支持拖拉拽 -->
<Modal v-model="modal" width="850" :mask-closable="false" draggable>
<div class="header-title" slot="header"></div>
<img ref='modalImg' :src="url" style="width:825px; height:720px;transition:all .3s" />
<div slot="footer" class="text-center">
<Button type="primary" shape="circle" class="mr-10" @click="imgRotate(-90)"><Icon style='font-size: 20px;' type="ios-undo" /></Button>
<Button type="primary" shape="circle" class="mr-10" @click="imgRotate(90)"><Icon style='font-size: 20px;' type="ios-redo" /></Button>
</div>
</Modal>
<Modal v-model="validateModal" class-name="zc-modal" width="400" :mask-closable="false" >
<div class="header-title" slot="header">删除</div>
<div style="color:red;margin:20px 0;" class="text-center">是否确定删除？</div>
<div slot="footer" class="text-center">
<Button type="default" shape="circle" class="mr-10" @click="validateModal=false">取消</Button>
<Button type="primary" shape="circle" @click="submitRemove(index)">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import store from 'store'
export default {
components: { draggable },
props: [
'uploadType', // uploadType=上传文件按钮类型
'haveUpload', // 编辑时接收后端传回的数据
'isCanUploadVideo',
'getFlieList', // 编辑时的附件文件
'isUploadUrl', // fbb=app上传地址，zc=pc上传地址
'maxLength', // 文件上传件数
'format', // 上传文件的格式
'width', // 上传附件按钮的宽度
'btnName', // 上传按钮的名字
'isImg', // 是否是图片
'isModal', // 是否采用弹框显示(拖拉拽)
'deleteValidate' // 是否删除 boolean
],
data () {
return {
curDegree: 0, // 记录当前图片的旋转度数
modal: false, // 弹框
validateModal: false, // 确认删除弹框提醒
msgFlag: false, // 多选时，标识文件超出数据是否已发出提示 （methods：handleUpload）
uploadSum: 0, // 多选时，记录一次上传多少个文件
url: '',
visible: false,
uploadList: [], // 上传成功之后后端返回的图片数组
defaultList: [], // 默认已上传的文件列表
uploadHeader: {},
defaultFormat: ['jpg', 'png', 'jpeg', 'doc', 'docx', 'xls', 'xlsx', 'pdf'],
imagesList: [], // 图片预览
defaultImagesList: [], // 图片预览
fileObj: {},
index: '',
activeIndex:0,
}
},
created () {
this.init()
if (this.isCanUploadVideo) {
this.defaultFormat = [
'jpg',
'png',
'jpeg',
'doc',
'docx',
'xls',
'xlsx',
'pdf',
'mp4',
'mpeg',
'.mpg',
'avi',
'mov',
'wmv',
'mkv',
'flv'
]
}
if (this.getFlieList) {
this.uploadList = this.getFlieList
}
},
methods: {
init () {
this.uploadHeader = { ApiAuth: store.get('apiAuth') }
},
handleFormatError (file) {
if (this.format !== undefined) {
this.$Notice.warning({
title: '文件类型不合法',
desc:
file.name +
'的文件类型不正确，请上传后缀为' + this.format + '的文件。'
})
} else {
this.$Notice.warning({
title: '文件类型不合法',
desc:
file.name +
'的文件类型不正确，请上传后缀为jpg、png、doc、docx、xls、xlsx、pdf的文件。'
})
}
},
clearUpload () { // 清除图片列表
this.uploadList = []
this.$refs.upload.clearFiles()
},
handleSuccess (response, file, fileList) {
// this.$emit('getFilelist', { response, fileList })
// if (response && response.code === 1) {
// this.uploadList = fileList
// // this.uploadList.push(file)
// // 上传成功之后后端返回的图片数组 清空数据
// // 多选时，标识文件超出数据是否已发出提示 清空数据
// }
this.$emit('getFilelist', { response, fileList: this.uploadList })
},
handleProgress (event, file, fileList) {
// console.log('上传中', event) // 继承了原生函数的 event 事件
// console.log('上传中 file', file) // 上传的文件
// console.log('上传中 fileList', fileList) // 上传文件列表包含file
// uploadList 就是 原文档中的那个渲染的 uplist 是个数组，所以要把filelist 赋值给他
this.uploadList = fileList
// 调用监听 上传进度 的事件
event.target.onprogress = (event) => {
let uploadPercent = parseFloat(((event.loaded / event.total) * 100).toFixed(2)) // 保留两位小数，具体根据自己需求做更改
// 手动设置显示上传进度条 以及上传百分比
file.showProgress = true
file.percentage = uploadPercent
}
},
handleUpload (file, fileList) {
// console.log('handleUpload')
if (this.maxLength) {
const check = (this.uploadList.length) < this.maxLength
if (!check) {
// 多选时，标识文件超出数据是否已发出提示(否则会出现多个提示)
this.$Notice.warning({
title: `最多上传${this.maxLength}份文件`
})
} else {
// this.uploadList.push(file)
}
return check
}
},
handleMaxSize (file) {
this.$Notice.warning({
title: '文件大小不合法',
desc: file.name + '太大啦请上传小于10M的文件。'
})
},
// 删除图片
handleRemove (file, index) {
if (this.deleteValidate) {
this.validateModal = true
this.fileObj = file
this.index = index
} else {
this.uploadList.splice(this.uploadList.indexOf(file), 1)
this.$emit('getFilelist', { response: {}, fileList: this.uploadList, type: 'handleRemove', file: file, index, fileId: file.id ? file.id : file.response.data.id })
}
},
// 确定删除图片
submitRemove (index) {
this.uploadList.splice(this.uploadList.indexOf(this.fileObj), 1)
this.$emit('getFilelist', { response: {}, fileList: this.uploadList, type: 'handleRemove', file: this.fileObj, index, fileId: this.fileObj.id ? this.fileObj.id : this.fileObj.response.data.id })
this.validateModal = false
},
// 移动图片顺序
async datadragEnd (evt) {
evt.preventDefault()
// console.log('拖动前的索引 :' + evt.oldIndex)
// console.log('拖动后的索引 :' + evt.newIndex)
// 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
// console.log(evt)
// let uploadList = JSON.parse(JSON.stringify(this.uploadList))
// if (evt.oldIndex > evt.newIndex) {
// uploadList.splice(evt.newIndex, 0, uploadList[evt.oldIndex])
// uploadList.splice(evt.oldIndex + 1, 1)
// } else {
// uploadList.splice(evt.newIndex + 1, 0, uploadList[evt.oldIndex])
// uploadList.splice(evt.oldIndex, 1)
// }
this.$emit('datadragEnd', { fileList: this.uploadList })
},
handleView (item, index) {
let type = ''
this.activeIndex=index
if (item.ext) {
type = item.ext.toLowerCase()
} else if (item.response) {
type = (item.response.data.ext || '').toLowerCase()
}
if (type === 'jpg' || type === 'png' || type === 'jpeg') {
this.url = item.url ? item.url : item.response.data.url
if (this.isModal) { // 使用弹框查看图片
this.modal = true
return false
}
this.visible = false
if (this.isImg === false) {
this.getImagesUrl([this.uploadList[index]])
} else {
this.getImagesUrl(this.uploadList)
}
// viewer插件 需要延迟一点才能点一次展示出图片 - -..
setTimeout(() => {
const viewer = this.$el.querySelector('.images').$viewer
viewer.show()
}, 500)
} else {
// window.open(item.response.data.url)
this.url = item.url ? item.url : item.response.data.url
window.open(this.url, item.name)
}
},
// 获取图片地址
getImagesUrl (list) {
this.imagesList = []
this.defaultImagesList = []
if (list.length != 0) {
list.map(item => {
this.imagesList.push(item.url ? item.url : item.response.data.url)
this.defaultImagesList.push(item.url ? item.url : item.response.data.url)
})
// let newArray = this.defaultImagesList.slice(this.activeIndex, this.defaultImagesList.length)
// let footArray = this.defaultImagesList.slice(0, this.activeIndex)
// this.imagesList =newArray.concat(footArray)
}
},
// 图片旋转
imgRotate (degree) {
this.curDegree += degree
this.$refs.modalImg.style.transform = `rotate(${this.curDegree}deg)`
// if (this.curDegree === 360 || this.curDegree === -360) {
// this.curDegree = 0
// }
}
},
computed: {},
mounted () {
if (this.$refs.upload) {
this.uploadList = this.$refs.upload.fileList
this.getImagesUrl(this.$refs.upload.fileList)
}
},
watch: {
haveUpload: {
handler (newV, oldV) {
if (newV) {
this.defaultList = newV
this.uploadList = newV
this.getImagesUrl(newV)
}
},
immediate: true,
deep: true
},
getFlieList: {
handler (val) {
this.uploadList = val
this.getImagesUrl(val)
}
}
}
}
</script>
<style lang="less" scoped>
.close{
position: absolute;
top:-8px;
right:-8px;
color:red;
cursor: pointer;
}
// .com_upload {
// float: right;
// // height: 72px;
// // line-height: 70px;
// background: #f1f5ff;
// color: #4e97d9;
// cursor: pointer;
// border-left: 1px solid #e6e6e6;
// }
.add-upload {
width: 58px;
height: 58px;
line-height: 58px;
border: 1px dashed #e6e6e6;
cursor: pointer;
}
.upload-list {
float: left;
width: 58px;
height: 58px;
line-height: 58px;
border: 1px solid transparent;
border-radius: 4px;
// overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 5px;
}
.upload-list img {
width: 100%;
height: 100%;
border-radius: 4px
}
.upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
display: block;
}
.upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
// .upload-list{
// display: inline-block;
// width: 60px;
// height: 60px;
// text-align: center;
// line-height: 60px;
// border: 1px solid transparent;
// border-radius: 4px;
// overflow: hidden;
// background: #fff;
// position: relative;
// box-shadow: 0 1px 1px rgba(0,0,0,.2);
// margin-right: 4px;
// }
.upload-list img {
width: 100%;
height: 100%;
}
.upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
display: block;
}
.upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
.file_Img {
display: inline-block;
border: 1px solid #ccc;
border-radius: 3px;
padding: 0 5px;
}
.div-left-flex{
flex: 1;
text-align: left;
padding-top: 8px;
}
.file {
border: 1px solid #e6e6e6;
border-radius: 8px;
display: inline-block;
margin: 0 5px 5px 0;
padding: 5px 10px;
cursor: pointer;
vertical-align: text-bottom;
}
</style>

524
pgweb/src/components/upload/file-upload.vue Normal file
View File

@@ -0,0 +1,524 @@
<template>
<div>
<div v-if="uploadType === 'btnUpload'" class="zc-flex" style="justify-content: space-between;">
<template v-if="isImg===false"><!--表示其他非图片文件-->
<div class="div-left-flex">
<span v-for="(item,index) in uploadList" class="file" :key="index">
{{item.name}}
<Icon class="pl-10" type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
<Icon class="pl-10" type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
</span>
</div>
</template>
<template v-else>
<div class="attach-container">
<div class="upload-container">
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<template v-if="(item.status === 'finished') || !item.status">
<!-- <img :src="item.url ? item.url : item.response.data.url" /> -->
<!-- thum1 详情返回缩略图字段，thumb_url 上传时返回缩略图字段 -->
<div>
<img :src="item.thum1?item.thum1:item.response.data.thumb_url" v-if="item.response.data.ext == 'jpg' || item.response.data.ext == 'jpeg' || item.response.data.ext == 'png'"/>
<img src="@/assets/images/zip.png" v-else-if="item.response.data.ext == 'zip'"/>
<img src="@/assets/images/pptx.png" v-else-if="item.response.data.ext == 'pptx' || item.response.data.ext == 'ppt'"/>
<img src="@/assets/images/xlsx.png" v-else-if="item.response.data.ext == 'xlsx' || item.response.data.ext == 'xls' || item.response.data.ext == 'csv'"/>
<img src="@/assets/images/pdf.png" v-else-if="item.response.data.ext == 'pdf'"/>
<img src="@/assets/images/docx.png" v-else-if="item.response.data.ext == 'doc' || item.response.data.ext == 'docx'"/>
<img src="@/assets/images/file.png" v-else />
<!--显示文件名称-->
<div class="file-name">{{item.name}}</div>
</div>
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</div>
</div>
</template>
<div class="mt-10">
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="format || defaultFormat"
:max-size="maxSize?maxSize:$config.maxSize"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleUpload"
:on-progress="handleProgress"
multiple
type="drag"
name="pic"
:headers="uploadHeader"
:action="isUploadUrl == 'fbb'?$config.appUploadUrl:$config.uploadUrl"
>
<Button>上传附件</Button>
</Upload>
</div>
</div>
<div v-if="!uploadType">
<div class="attach-container">
<div class="upload-container">
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<template v-if="(item.status === 'finished') || !item.status">
<img :src="item.url ? item.url : item.response.data.url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</div>
</div>
<div class="zc-left mr-10">
<Upload
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="format || defaultFormat"
:max-size="maxSize?maxSize:$config.maxSize"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleUpload"
:on-progress="handleProgress"
multiple
type="drag"
name="pic"
:headers="uploadHeader"
:action="isUploadUrl == 'fbb'?$config.appUploadUrl:$config.uploadUrl"
>
<div class="add-upload">
<Icon type="ios-add" size="20"></Icon>
</div>
</Upload>
</div>
</div>
<div v-if="uploadType === 'showImg'" class="attach-container">
<div class="upload-container">
<div class="upload-list" v-for="(item,index) in haveUpload" :key="index">
<template>
<img :src="item.url ? item.url : item.response.data.url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
</div>
</template>
</div>
</div>
</div>
<div v-if="uploadType === 'showDraggable'">
<draggable v-model="uploadList" @update="datadragEnd">
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
<template v-if="(item.status === 'finished') || !item.status">
<!-- <img :src="item.url ? item.url : item.response.data.url" /> -->
<!-- thum1 详情返回缩略图字段，thumb_url 上传时返回缩略图字段 -->
<img :src="item.thum1?item.thum1:item.response.data.thumb_url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</draggable>
</div>
<div v-if="uploadType === 'showImgName'" class="attach-container">
<span class="file_Img" v-for="(item,index) in haveUpload" :key="index">
{{item.name}}
<Icon style="padding-left: 5px;cursor: pointer;" type="ios-eye-outline" @click.native="handleView(item,index)"></Icon>
</span>
</div>
<div class="images" v-show="visible" v-viewer="{navbar: false,}">
<viewer :images="imagesList" ref='viewer' @inited='inited'>
<img v-for="(src,i) in imagesList" :src="src" :key="`${i}src`" />
</viewer>
</div>
<!-- 弹框查看图片/支持拖拉拽 -->
<Modal v-model="modal" width="850" :mask-closable="false" draggable>
<div class="header-title" slot="header"></div>
<img ref='modalImg' :src="url" style="width:825px; height:720px;transition:all .3s" />
<div slot="footer" class="text-center">
<Button type="primary" shape="circle" class="mr-10" @click="imgRotate(-90)"><Icon style='font-size: 20px;' type="ios-undo" /></Button>
<Button type="primary" shape="circle" class="mr-10" @click="imgRotate(90)"><Icon style='font-size: 20px;' type="ios-redo" /></Button>
</div>
</Modal>
<Modal v-model="validateModal" class-name="zc-modal" width="400" :mask-closable="false" >
<div class="header-title" slot="header">删除</div>
<div style="color:red;margin:20px 0;" class="text-center">是否确定删除？</div>
<div slot="footer" class="text-center">
<Button type="default" shape="circle" class="mr-10" @click="validateModal=false">取消</Button>
<Button type="primary" shape="circle" @click="submitRemove(index)">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import store from 'store'
export default {
components: { draggable },
props: [
'uploadType', // uploadType=上传文件按钮类型
'haveUpload', // 编辑时接收后端传回的数据
'isCanUploadVideo',
'getFlieList', // 编辑时的附件文件
'isUploadUrl', // fbb=app上传地址，zc=pc上传地址
'maxLength', // 文件上传件数
'format', // 上传文件的格式
'width', // 上传附件按钮的宽度
'btnName', // 上传按钮的名字
'isImg', // 是否是图片
'isModal', // 是否采用弹框显示(拖拉拽)
'deleteValidate', // 是否删除 boolean
'maxSize'
],
data () {
return {
modal: false, // 弹框
validateModal: false, // 确认删除弹框提醒
msgFlag: false, // 多选时，标识文件超出数据是否已发出提示 （methods：handleUpload）
uploadSum: 0, // 多选时，记录一次上传多少个文件
url: '',
visible: false,
uploadList: [], // 上传成功之后后端返回的图片数组
defaultList: [], // 默认已上传的文件列表
uploadHeader: {},
defaultFormat: ['jpg', 'png', 'jpeg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'zip'],
imagesList: [], // 图片预览
defaultImagesList: [], // 图片预览
fileObj: {},
index: '',
isVisible:false,
activaIndex:0,
curDegree: 0
}
},
created () {
this.init()
if (this.isCanUploadVideo) {
this.defaultFormat = [
'jpg',
'png',
'jpeg',
'doc',
'docx',
'xls',
'xlsx',
'pdf',
'mp4',
'mpeg',
'.mpg',
'avi',
'mov',
'wmv',
'mkv',
'flv',
'zip'
]
}
if (this.getFlieList) {
this.uploadList = this.getFlieList
}
},
methods: {
init () {
this.uploadHeader = { ApiAuth: store.get('apiAuth') }
},
inited(viewer) {
this.$viewer = viewer;
},
handleFormatError (file) {
if (this.format !== undefined) {
this.$Notice.warning({
title: '文件类型不合法',
desc:
file.name +
'的文件类型不正确，请上传后缀为' + this.format + '的文件。'
})
} else {
this.$Notice.warning({
title: '文件类型不合法',
desc:
file.name +
'的文件类型不正确，请上传后缀为jpg、png、doc、docx、xls、xlsx、pdf、zip的文件。'
})
}
},
clearUpload () { // 清除图片列表
this.uploadList = []
this.$refs.upload.clearFiles()
},
handleSuccess (response, file, fileList) {
// this.$emit('getFilelist', { response, fileList })
// if (response && response.code === 1) {
// this.uploadList = fileList
// // this.uploadList.push(file)
// // 上传成功之后后端返回的图片数组 清空数据
// // 多选时，标识文件超出数据是否已发出提示 清空数据
// }
console.log('uploadList', this.uploadList)
this.$emit('getFilelist', { response, fileList: this.uploadList })
},
handleProgress (event, file, fileList) {
// console.log('上传中', event) // 继承了原生函数的 event 事件
// console.log('上传中 file', file) // 上传的文件
// console.log('上传中 fileList', fileList) // 上传文件列表包含file
// uploadList 就是 原文档中的那个渲染的 uplist 是个数组，所以要把filelist 赋值给他
this.uploadList = fileList
// 调用监听 上传进度 的事件
event.target.onprogress = (event) => {
let uploadPercent = parseFloat(((event.loaded / event.total) * 100).toFixed(2)) // 保留两位小数，具体根据自己需求做更改
// 手动设置显示上传进度条 以及上传百分比
file.showProgress = true
file.percentage = uploadPercent
}
},
handleUpload (file, fileList) {
// console.log('handleUpload')
if (this.maxLength) {
const check = (this.uploadList.length) < this.maxLength
if (!check) {
// 多选时，标识文件超出数据是否已发出提示(否则会出现多个提示)
this.$Notice.warning({
title: `最多上传${this.maxLength}份文件`
})
} else {
// this.uploadList.push(file)
}
return check
}
},
handleMaxSize (file) {
this.$Notice.warning({
title: '文件大小不合法',
desc: file.name + `太大啦请上传小于${this.maxSize ==undefined?2:(this.maxSize/1024)}M的文件。`
})
},
// 删除图片
handleRemove (file, index) {
if (this.deleteValidate) {
this.validateModal = true
this.fileObj = file
this.index = index
} else {
this.uploadList.splice(this.uploadList.indexOf(file), 1)
this.$emit('getFilelist', { response: {}, fileList: this.uploadList, type: 'handleRemove', file: file, index, fileId: file.id ? file.id : file.response.data.id })
}
},
// 确定删除图片
submitRemove (index) {
this.uploadList.splice(this.uploadList.indexOf(this.fileObj), 1)
this.$emit('getFilelist', { response: {}, fileList: this.uploadList, type: 'handleRemove', file: this.fileObj, index, fileId: this.fileObj.id ? this.fileObj.id : this.fileObj.response.data.id })
this.validateModal = false
},
// 移动图片顺序
async datadragEnd (evt) {
evt.preventDefault()
// console.log('拖动前的索引 :' + evt.oldIndex)
// console.log('拖动后的索引 :' + evt.newIndex)
// 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
// console.log(evt)
// let uploadList = JSON.parse(JSON.stringify(this.uploadList))
// if (evt.oldIndex > evt.newIndex) {
// uploadList.splice(evt.newIndex, 0, uploadList[evt.oldIndex])
// uploadList.splice(evt.oldIndex + 1, 1)
// } else {
// uploadList.splice(evt.newIndex + 1, 0, uploadList[evt.oldIndex])
// uploadList.splice(evt.oldIndex, 1)
// }
this.$emit('datadragEnd', { fileList: this.uploadList })
},
handleView (item, index) {
let type = ''
this.activaIndex = index
if (item.ext) {
type = item.ext.toLowerCase()
} else if (item.response) {
type = (item.response.data.ext || '').toLowerCase()
}
if (type === 'jpg' || type === 'png' || type === 'jpeg') {
this.url = item.url ? item.url : item.response.data.url
if (this.isModal) { // 使用弹框查看图片
this.modal = true
return false
}
this.isVisible=true
this.visible = false
if (this.isImg === false) {
this.getImagesUrl([this.uploadList[index]])
} else {
this.getImagesUrl(this.uploadList)
}
// 调用图片查看器
this.$viewer.view(index);
} else {
// window.open(item.response.data.url)
this.url = item.url ? item.url : item.response.data.url
window.open(this.url, item.name)
}
},
// 图片预览重组
group (index) {
if (index != 0) {
let newArray = this.defaultImagesList.slice(index, this.defaultImagesList.length)
let footArray = this.defaultImagesList.slice(0, index)
this.imagesList = newArray.concat(footArray)
} else {
this.imagesList = this.defaultImagesList
}
},
// 获取图片地址
getImagesUrl (list) {
this.imagesList = []
if (list.length != 0) {
list.map(item => {
this.imagesList.push(item.url ? item.url : item.response.data.url)
this.defaultImagesList.push(item.url ? item.url : item.response.data.url)
})
}
},
// 图片旋转
imgRotate (degree) {
this.curDegree += degree
this.$refs.modalImg.style.transform = `rotate(${this.curDegree}deg)`
}
},
computed: {},
mounted () {
if (this.$refs.upload) {
this.uploadList = this.$refs.upload.fileList
this.getImagesUrl(this.$refs.upload.fileList)
}
},
watch: {
haveUpload: {
handler (newV, oldV) {
if (newV) {
this.defaultList = newV
this.uploadList = newV
this.getImagesUrl(newV)
}
},
immediate: true,
deep: true
},
getFlieList: {
handler (val) {
this.uploadList = val
this.getImagesUrl(val)
}
}
}
}
</script>
<style lang="less" scoped>
// .com_upload {
// float: right;
// // height: 72px;
// // line-height: 70px;
// background: #f1f5ff;
// color: #4e97d9;
// cursor: pointer;
// border-left: 1px solid #e6e6e6;
// }
.add-upload {
width: 100px;
height: 100px;
line-height: 100px;
border: 1px dashed #e6e6e6;
cursor: pointer;
}
.upload-list {
float: left;
width: 100px;
/*height: 100px;
line-height: 100px;*/
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
text-align: center;
justify-content: center;
align-items: center;
}
.upload-list img {
width: 80px;
height: 80px;
}
.upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
display: block;
}
.upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 8px;
}
.upload-list .file-name {
font-size: 12px;
color: #666;
/*一行显示，超出部分省略号*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file_Img {
display: inline-block;
border: 1px solid #ccc;
border-radius: 3px;
padding: 0 5px;
}
.div-left-flex{
flex: 1;
text-align: left;
padding-top: 8px;
}
.file {
border: 1px solid #e6e6e6;
border-radius: 8px;
display: inline-block;
margin: 0 5px 5px 0;
padding: 5px 10px;
cursor: pointer;
vertical-align: text-bottom;
}
</style>

201
pgweb/src/components/upload/qcloud.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<div>
<!-- 按钮上传附件 -->
<div v-if="uploadType == 'btnUpload'" class="zc-flex" style="justify-content: space-between;">
<div class=" upload-container">
<div class="upload-list" v-for="(item,index) in fileList" :key="index">
<template>
<img :src="item.url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
</div>
</div>
<div class="mt-10">
<Upload class="" :before-upload="handleBeforeUpload" multiple action="sadsds" >
<Button >上传附件</Button>
</Upload>
</div>
</div>
<!-- 默认上传 -->
<div v-if='!uploadType'>
<div class="zc-left mr-10">
<Upload class :before-upload="handleBeforeUpload" multiple action="sadsds">
<div class="add-upload">
<Icon type="ios-add" size="20"></Icon>
</div>
</Upload>
</div>
<div class="upload-list" v-for="(item,index) in fileList" :key="index">
<template>
<img :src="item.url" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
</div>
</div>
<div class="images" v-show="visible" v-viewer="{navbar: false}">
<img :src="url" />
</div>
</div>
</template>
<script>
// import { getCosConfig } from '@/api/upload'
import COS from 'cos-js-sdk-v5'
export default {
props: ['uploadType', 'uploadSize'], // uploadType=上传类型,uploadSize=上传数量
data () {
return {
dataObj: { token: '', key: '' },
image_uri: [],
fileList: [
// { url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=edbc1b19a4773912c4268267c022e125/cf1b9d16fdfaaf51e861dc1b815494eef11f7a97.jpg',
// name: 'img.png' },
// { url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=edbc1b19a4773912c4268267c022e125/cf1b9d16fdfaaf51e861dc1b815494eef11f7a97.jpg',
// name: 'img.png' },
// { url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=edbc1b19a4773912c4268267c022e125/cf1b9d16fdfaaf51e861dc1b815494eef11f7a97.jpg',
// name: 'img.png' },
// { url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=edbc1b19a4773912c4268267c022e125/cf1b9d16fdfaaf51e861dc1b815494eef11f7a97.jpg',
// name: 'img.png' }
// { url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=edbc1b19a4773912c4268267c022e125/cf1b9d16fdfaaf51e861dc1b815494eef11f7a97.jpg',
// name: 'img.png' }
],
cos: null,
visible: false,
url: '',
imgName: ''
}
},
created () {
this.initCos()
},
methods: {
// 图片查看
handleView (item) {
this.imgName = item.name
this.url = item.url
// viewer插件 需要延迟一点才能点一次展示出图片
setTimeout(() => {
const viewer = this.$el.querySelector('.images').$viewer
viewer.show()
}, 100)
},
handleRemove (file) {
this.fileList.splice(this.fileList.indexOf(file), 1)
this.hadleUpload()
},
// 生成cos实例
initCos () {
this.cos = new COS({
SecretId: 'AKIDCXidMS8xpSN5brgqnnbD5ey6zPZfxVfZ',
SecretKey: 'XhfN8h036vMVTDhwzZhNp76wWafcsukd'
// getAuthorization: (options, callback) => {
// getCosConfig().then(res => {
// if (res.code === '0000') {
// const credentials = res
// // eslint-disable-next-line standard/no-callback-literal
// callback({
// TmpSecretId: credentials.secretId,
// TmpSecretKey: credentials.secretKey,
// // XCosSecurityToken: credentials.sessionToken, // 需要提供把 sessionToken 传给
// ExpiredTime: credentials.expiredTime,
// ScopeLimit: true // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
// })
// }
// })
// }
})
},
handleBeforeUpload (file) {
if (this.uploadSize && this.fileList.length >= this.uploadSize) {
this.$Message.error(`最多上传${this.uploadSize}张图片`)
} else {
this.upload(file)
}
return false
},
// 手动上传文件
upload (files) {
const fileObject = files
if (!fileObject) { return }
this.cos.putObject({
Bucket: 'test-creditplatform-1259099789', /* 必须 */
Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
Key: 'exampleobject', /* 必须 */
StorageClass: 'STANDARD',
Body: fileObject, // 上传文件对象
onProgress: function (progressData) {
console.log(JSON.stringify(progressData))
}
}, function (err, data) {
console.log(err || data)
})
this.cos.getObjectUrl({
Key: fileObject.name,
Bucket: 'test-creditplatform-1259099789', /* 必须 */
Sign: false,
Region: 'ap-guangzhou'
}, (err, data) => {
if (!err) {
this.fileList.push({ name: fileObject.name, url: data.Url })
}
})
}
}
}
</script>
<style lang='less' scoped>
.add-upload {
width: 58px;
height: 58px;
line-height: 58px;
border: 1px dashed #e6e6e6;
cursor: pointer;
}
.upload-list {
float: left;
width: 58px;
height: 58px;
line-height: 58px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
}
.upload-list img {
width: 100%;
height: 100%;
}
.upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
display: block;
}
.upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
/deep/.ivu-icon-ios-add:before {
padding: 17px;
}
</style>