flx:新增附件预览功能
This commit is contained in:
parent
b672f7f4d3
commit
6334678224
@ -13,9 +13,10 @@
|
||||
</lsj-upload>
|
||||
|
||||
<view class="w-file-list" :key="fileList.length">
|
||||
<view v-for="(file, i) in fileList" class="w-file" :key="`file_${i}_${file.type}`" @click="downFile(i)">
|
||||
<view v-for="(file, i) in fileList" class="w-file" :key="`file_${i}_${file.type}`" @click.stop="downFile(i)">
|
||||
<image :src="getFileImgByType(file.name)" mode="aspectFit"></image>
|
||||
<text class="w-file-name">{{file.name}}</text>
|
||||
<text :class="{'mr_10': file.size}" @click.stop="onPreview(i)">预览</text>
|
||||
<uni-tag v-if="file.size" :text="getSize(file.size)" size="mini" inverted></uni-tag>
|
||||
<text style="margin-right: 20rpx;" v-if="file.progress < 100">{{ file.progress }}%</text>
|
||||
<view v-else-if="!readonly" @click.stop="deleteFile(i, file)">
|
||||
@ -28,12 +29,15 @@
|
||||
<video v-if="getType(iframeUrl) == 'video'" class="iframe" :src="iframeUrl"></video>
|
||||
<image v-else-if="getType(iframeUrl) == 'image'" class="iframe" :src="iframeUrl">
|
||||
</image>
|
||||
<PreviewIframe @watchChild="watchChildClick" v-else :iframeUrl="iframeUrl"/>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import PreviewIframe from "@/components/previewIframe.vue"
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
@ -58,7 +62,7 @@
|
||||
isImageLink
|
||||
} from '@/utils/tool.js';
|
||||
const emits = defineEmits(['update:modelValue', 'resize'])
|
||||
|
||||
import { encode } from 'js-base64';
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
@ -125,6 +129,12 @@
|
||||
}
|
||||
})
|
||||
|
||||
const watchChildClick = () => {
|
||||
console.log("watchChildClick")
|
||||
showDisplay.value = false;
|
||||
showIframe.value = false;
|
||||
}
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('hideFp')
|
||||
uni.$off('showFp')
|
||||
@ -242,11 +252,35 @@
|
||||
showIframe.value = true;
|
||||
iframeUrl.value = `${url}`;
|
||||
} else {
|
||||
window.open(`${url}`)
|
||||
// window.open(`${url}`)
|
||||
}
|
||||
// openLocalFile(file.name, `${options.url}/${file.id}?name=${file.name}`)
|
||||
// openLocalFile(file.name, `${BASE_URL}/image/${file.id}`)
|
||||
}
|
||||
function onPreview(i) {
|
||||
const file = _value.value[i]
|
||||
// const fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
|
||||
// // 常见的图片文件后缀名
|
||||
// const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
// // 视频类型列表
|
||||
// const videoTypes = ['mp4', 'webm', 'ogg'];
|
||||
// 判断文件后缀名是否在常见图片文件后缀名数组中
|
||||
console.log(file)
|
||||
const url = file.url ? (file.url.includes("http://") ? file.url : `${BASE_URL}/image/${file.url}`) : `${BASE_URL}/image/${file.id}`;
|
||||
|
||||
if (isVideoLink(`${url}`) || isImageLink(`${url}`)) {
|
||||
// 是图片和视频
|
||||
showDisplay.value = true;
|
||||
showIframe.value = true;
|
||||
iframeUrl.value = `${url}`;
|
||||
} else {
|
||||
// window.open(`${url}`)
|
||||
showDisplay.value = true;
|
||||
showIframe.value = true;
|
||||
iframeUrl.value = `http://219.147.96.221:8012/onlinePreview?url=${encodeURIComponent(encode(url))}`;
|
||||
}
|
||||
// http://219.147.96.221:8012/onlinePreview?url=${encodeURIComponent(encode(src))}
|
||||
}
|
||||
|
||||
function getSize(size) {
|
||||
if (size > 1048576) {
|
||||
@ -293,6 +327,9 @@
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mr_10{
|
||||
margin-right: 20rpx
|
||||
}
|
||||
.w-upload-btn {
|
||||
padding: 10rpx;
|
||||
background-color: #F7F7F7;
|
||||
@ -354,12 +391,12 @@
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 650rpx;
|
||||
// width: 650rpx;
|
||||
font-size: 0;
|
||||
|
||||
.iframe {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
height: 1000rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -39,17 +39,25 @@
|
||||
},
|
||||
methods:{
|
||||
goBackFn(){
|
||||
// uni.navigateBack({
|
||||
// success: function() {
|
||||
// // console.log('getCurrentPages()',getCurrentPages())
|
||||
// // let page = getCurrentPages()[0]; //跳转页面成功之后
|
||||
// // if(page.route=='pages/projectManage/projectManage'){
|
||||
|
||||
// // }
|
||||
// // if (!page) return;
|
||||
// // page.onLoad(); //如果页面存在，则重新刷新页面
|
||||
// }
|
||||
// })
|
||||
let pages = getCurrentPages();
|
||||
// let prevPage = pages[pages.length - 2]
|
||||
console.log('prevPage', pages)
|
||||
if(pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
success: function() {
|
||||
// console.log('getCurrentPages()',getCurrentPages())
|
||||
// let page = getCurrentPages()[0]; //跳转页面成功之后
|
||||
// if(page.route=='pages/projectManage/projectManage'){
|
||||
|
||||
// }
|
||||
// if (!page) return;
|
||||
// page.onLoad(); //如果页面存在，则重新刷新页面
|
||||
}
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// uni.redirectTo({
|
||||
// url: `/pages/workspace/workspace?current=${11}`
|
||||
// });
|
||||
|
||||
37
components/previewIframe.vue
Normal file
37
components/previewIframe.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-icons @click="onClick" class="backImg" type="close" size="24"></uni-icons>
|
||||
<iframe class="iframe" :src="iframeUrl"></iframe>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:['iframeUrl'],
|
||||
data() {
|
||||
return {
|
||||
mobileTopHeight: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
onClick() {
|
||||
console.log('点击了');
|
||||
this.$emit('watchChild');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iframe {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.backImg {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 16px;
|
||||
}
|
||||
</style>
|
||||
3
main.js
3
main.js
@ -4,6 +4,8 @@ import { createSSRApp } from 'vue'
|
||||
import "/utils/webview.js"
|
||||
//把表单字段组件注册到全局，解决跨平台兼容的容器组件循环引用问题
|
||||
import WFormItem from '@/components/WFormItem.vue'
|
||||
import PreviewIframe from '@/components/previewIframe.vue'
|
||||
|
||||
import { Popup, Icon, Badge, Pagination } from 'vant';
|
||||
// import VueQuillEditor from "vue-quill-editor";
|
||||
// import "quill/dist/quill.core.css"; // import styles
|
||||
@ -13,6 +15,7 @@ import { Popup, Icon, Badge, Pagination } from 'vant';
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.component('WFormItem', WFormItem);
|
||||
app.component('PreviewIframe', PreviewIframe);
|
||||
// app.use(VueQuillEditor);
|
||||
app.use(Popup);
|
||||
app.use(Icon);
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.10",
|
||||
"js-base64": "^3.7.7",
|
||||
"vant": "^4.9.7",
|
||||
"vue-quill-editor": "^3.0.6"
|
||||
},
|
||||
@ -935,6 +936,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/is-url/-/is-url-1.2.4.tgz",
|
||||
"integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
|
||||
},
|
||||
"node_modules/js-base64": {
|
||||
"version": "3.7.7",
|
||||
"resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.7.tgz",
|
||||
"integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
|
||||
},
|
||||
"node_modules/lodash.camelcase": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.10",
|
||||
"js-base64": "^3.7.7",
|
||||
"vant": "^4.9.7",
|
||||
"vue-quill-editor": "^3.0.6"
|
||||
},
|
||||
|
||||
24
unpackage/dist/cache/.vite/deps/_metadata.json
vendored
24
unpackage/dist/cache/.vite/deps/_metadata.json
vendored
@ -1,43 +1,49 @@
|
||||
{
|
||||
"hash": "d2335b50",
|
||||
"hash": "3be55fd6",
|
||||
"configHash": "b0659917",
|
||||
"lockfileHash": "bd53ab4e",
|
||||
"browserHash": "b117f9d5",
|
||||
"lockfileHash": "f5a3c466",
|
||||
"browserHash": "3f2387fa",
|
||||
"optimized": {
|
||||
"@wangeditor/editor": {
|
||||
"src": "../../../../../node_modules/@wangeditor/editor/dist/index.esm.js",
|
||||
"file": "@wangeditor_editor.js",
|
||||
"fileHash": "0c59de0e",
|
||||
"fileHash": "6670cc30",
|
||||
"needsInterop": false
|
||||
},
|
||||
"@wangeditor/editor-for-vue": {
|
||||
"src": "../../../../../node_modules/@wangeditor/editor-for-vue/dist/index.esm.js",
|
||||
"file": "@wangeditor_editor-for-vue.js",
|
||||
"fileHash": "b0be2a76",
|
||||
"fileHash": "7f835cda",
|
||||
"needsInterop": false
|
||||
},
|
||||
"dayjs": {
|
||||
"src": "../../../../../node_modules/dayjs/dayjs.min.js",
|
||||
"file": "dayjs.js",
|
||||
"fileHash": "3f5a6ccc",
|
||||
"fileHash": "d66d7f1d",
|
||||
"needsInterop": true
|
||||
},
|
||||
"vant": {
|
||||
"src": "../../../../../node_modules/vant/es/index.mjs",
|
||||
"file": "vant.js",
|
||||
"fileHash": "448d5b42",
|
||||
"fileHash": "0c7c7cc2",
|
||||
"needsInterop": false
|
||||
},
|
||||
"vue-quill-editor": {
|
||||
"src": "../../../../../node_modules/vue-quill-editor/dist/vue-quill-editor.js",
|
||||
"file": "vue-quill-editor.js",
|
||||
"fileHash": "fb242545",
|
||||
"fileHash": "638ada97",
|
||||
"needsInterop": true
|
||||
},
|
||||
"@icon-park/vue-next": {
|
||||
"src": "../../../../../node_modules/@icon-park/vue-next/es/index.js",
|
||||
"file": "@icon-park_vue-next.js",
|
||||
"fileHash": "f1f87ffe",
|
||||
"fileHash": "9fa7c593",
|
||||
"needsInterop": false
|
||||
},
|
||||
"js-base64": {
|
||||
"src": "../../../../../node_modules/js-base64/base64.mjs",
|
||||
"file": "js-base64.js",
|
||||
"fileHash": "af862ef2",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user