【fix bug】67874 预览更改为viewer.js
This commit is contained in:
dujie
@@ -32,6 +32,7 @@
|
||||
"moment": "^2.29.4",
|
||||
"nprogress": "^0.2.0",
|
||||
"tinymce": "5.4.1",
|
||||
"v-viewer": "^1.6.4",
|
||||
"viser-vue": "^2.4.8",
|
||||
"vue": "^2.6.10",
|
||||
"vue-area-linkage": "^5.1.0",
|
||||
|
||||
@@ -10,22 +10,21 @@
|
||||
:fileList="fileList"
|
||||
:beforeUpload="beforeUpload"
|
||||
:disabled="disabled"
|
||||
:isMultiple="isMultiple"
|
||||
:showUploadList="isMultiple"
|
||||
v-bind="$attrs"
|
||||
:accept="accept"
|
||||
v-on="childListeners"
|
||||
@change="handleChange"
|
||||
@preview="handlePreview"
|
||||
:class="!isMultiple?'imgupload':''">
|
||||
<div :style="{'width':(!isMultiple?'104px':'auto'),'height':(!isMultiple?'104px':'auto')}">
|
||||
<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>
|
||||
<!--<img v-if="!isMultiple && picUrl" src="http://localhost:3000/jero-boot/sys/common/download/1379989167782797313?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTc4NTA1OTgsInVzZXJuYW1lIjoiYWRtaW4ifQ.1xRpivI0TzTqAnISJICNm-PoMxSDUITH5uaEcvwheIQ&fullfilename=3.jpeg" style="width:100%;height:100%"/>-->
|
||||
<div v-else class="iconp">
|
||||
:class="[!isMultiple?'imgupload':'', (!isMultiple && picUrl)?'image-upload-single-over':'' ]">
|
||||
<div>
|
||||
<!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
|
||||
<div class="iconp">
|
||||
<a-icon :type="uploadLoading ? 'loading' : 'plus'" />
|
||||
<div class="ant-upload-text">{{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<j-image-preview-modal ref="JImagePreviewModal"></j-image-preview-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -33,14 +32,15 @@
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import { getFileAccessHttpUrl } from '@/api/manage'
|
||||
|
||||
import JImagePreviewModal from './modal/JImagePreviewModal'
|
||||
// const Base64 = require('js-base64').Base64
|
||||
|
||||
const uidGenerator = () => {
|
||||
return '-' + parseInt(Math.random() * 10000 + 1, 10)
|
||||
return '-' + parseInt(Math.random() * 10000 + 1 + '', 10)
|
||||
}
|
||||
export default {
|
||||
name: 'JImageUpload',
|
||||
components: { JImagePreviewModal },
|
||||
data () {
|
||||
return {
|
||||
uploadAction: window._CONFIG.domianURL + '/sys/common/upload',
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
picUrl: false,
|
||||
headers: {},
|
||||
fileList: [],
|
||||
accept: 'image/png, image/jpeg',
|
||||
previewImage: ''
|
||||
}
|
||||
},
|
||||
@@ -88,7 +89,6 @@ export default {
|
||||
computed: {
|
||||
// 透传给下级组件的事件，需要排除本组件使用的change事件
|
||||
childListeners () {
|
||||
// const vm = this
|
||||
const result = Object.assign({},
|
||||
this.$listeners
|
||||
)
|
||||
@@ -123,15 +123,23 @@ export default {
|
||||
return
|
||||
}
|
||||
this.picUrl = true
|
||||
const fileList = []
|
||||
const arr = paths.split(',')
|
||||
for (let a = 0; a < arr.length; a++) {
|
||||
this.fileList.forEach((item) => {
|
||||
if (item.url === arr[a]) {
|
||||
item.uid = uidGenerator()
|
||||
item.response.status = 'history'
|
||||
const url = getFileAccessHttpUrl(arr[a])
|
||||
fileList.push({
|
||||
uid: uidGenerator(),
|
||||
name: arr[a],
|
||||
status: 'done',
|
||||
url: url,
|
||||
response: {
|
||||
status: 'history',
|
||||
message: arr[a]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.fileList = fileList
|
||||
},
|
||||
beforeUpload: function (file) {
|
||||
const fileType = file.type
|
||||
@@ -144,7 +152,7 @@ export default {
|
||||
this.picUrl = false
|
||||
let fileList = info.fileList
|
||||
// update-begin-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选，返回选定的元素。
|
||||
if (this.number > 0 && this.isMultiple) {
|
||||
if (this.number > 0) {
|
||||
fileList = fileList.slice(-this.number)
|
||||
}
|
||||
// update-end-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选，返回选定的元素。
|
||||
@@ -153,7 +161,7 @@ export default {
|
||||
this.picUrl = true
|
||||
fileList = fileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`
|
||||
file.url = `${file.response.result.id}`
|
||||
}
|
||||
return file
|
||||
})
|
||||
@@ -172,9 +180,11 @@ export default {
|
||||
// 预览
|
||||
handlePreview (file) {
|
||||
if (file && file.url) {
|
||||
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
|
||||
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(fileFullUrl)}`
|
||||
window.open(url)
|
||||
console.log(file)
|
||||
// const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/${file.url}`
|
||||
// const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
|
||||
// window.open(url)
|
||||
this.$refs.JImagePreviewModal.open(file)
|
||||
}
|
||||
},
|
||||
getAvatarView () {
|
||||
@@ -190,7 +200,7 @@ export default {
|
||||
path = ''
|
||||
}
|
||||
const arr = []
|
||||
if (!this.isMultiple) {
|
||||
if (!this.isMultiple && uploadFiles && uploadFiles.length > 0) {
|
||||
arr.push(uploadFiles[uploadFiles.length - 1].url)
|
||||
} else {
|
||||
for (let a = 0; a < uploadFiles.length; a++) {
|
||||
|
||||
@@ -7,36 +7,42 @@
|
||||
:footer="null"
|
||||
@cancel="close"
|
||||
cancelText="关闭">
|
||||
<img class="img-container" :src="imgUrl" alt="">
|
||||
<viewer>
|
||||
<img :src="imageUrl" style="width: 200px;height: 200px">
|
||||
</viewer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getFileAccessHttpUrl } from '../../../api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JImagePreviewModal',
|
||||
data () {
|
||||
return {
|
||||
modalWidth: '60%',
|
||||
modalWidth: 600,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
imgUrl: ''
|
||||
imageUrl: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open (imgUrl) {
|
||||
this.imgUrl = imgUrl
|
||||
open (file) {
|
||||
this.visible = true
|
||||
this.imageUrl = getFileAccessHttpUrl(file.name)
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.imgUrl = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-container {
|
||||
width: 100%;
|
||||
/deep/.ant-modal-body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,6 +20,8 @@ import '@/utils/filter' // base filtermybatis-plus
|
||||
import Print from 'vue-print-nb-jeecg'
|
||||
import preview from 'vue-photo-preview'
|
||||
import 'vue-photo-preview/dist/skin.css'
|
||||
import Viewer from 'v-viewer'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import SSO from '@/cas/sso.js'
|
||||
import {
|
||||
ACCESS_TOKEN,
|
||||
@@ -63,6 +65,12 @@ Vue.use(preview)
|
||||
Vue.use(vueBus)
|
||||
Vue.use(JeroComponents)
|
||||
Vue.use(VueAreaLinkage)
|
||||
Vue.use(Viewer)
|
||||
Viewer.setDefaults({
|
||||
// 需要配置的属性 注意属性并没有引号
|
||||
title: false,
|
||||
toolbar: false
|
||||
})
|
||||
|
||||
SSO.init(() => {
|
||||
main()
|
||||
|
||||
Reference in New Issue
Block a user