371 lines
8.9 KiB
Vue
371 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<lsj-upload v-if="!$props.readonly" ref="fileUpload" childId="upload1" width="100%" height="100%" :option="options"
|
|||
|
|
:formats="''" :debug="false" :instantly="false" :count="$props.formProps.maxNumber" :size="$props.formProps.maxSize"
|
|||
|
|
:multiple="$props.formProps.multiple" @change="fileChange" instantly @uploadEnd="uploadEnd" @progress="onprogre">
|
|||
|
|
<slot>
|
|||
|
|
<view class="w-upload-btn">
|
|||
|
|
<uni-icons2 type="cloud-upload" :size="40" color="#b3b3b3"></uni-icons2>
|
|||
|
|
<text>{{$props.formProps.placeholder || '请选择附件'}} | 单个附件不得超过{{$props.formProps.maxSize}}MB</text>
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
|
|||
|
|
</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)">
|
|||
|
|
<image :src="getFileImgByType(file.name)" mode="aspectFit"></image>
|
|||
|
|
<text class="w-file-name">{{file.name}}</text>
|
|||
|
|
<uni-tag :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="!$props.readonly" @click.stop="deleteFile(i, file)">
|
|||
|
|
<uni-icons2 type="trash" size="20" color="#ce8d8e"></uni-icons2>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fixed" :class="{show:showIframe}" v-if="showDisplay" @click="showDisplay=false">
|
|||
|
|
<view class="iframeMain" @click.stop="showDisplay=true">
|
|||
|
|
<video v-if="getType(iframeUrl) == 'video'" class="iframe" :src="iframeUrl"></video>
|
|||
|
|
<image v-else-if="getType(iframeUrl) == 'image'" class="iframe" :src="iframeUrl">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
delFile
|
|||
|
|
} from '@/api/resource.js'
|
|||
|
|
import {
|
|||
|
|
saveFileTemp,
|
|||
|
|
removeFileTemp,
|
|||
|
|
openLocalFile,
|
|||
|
|
isVideoLink,
|
|||
|
|
isImageLink
|
|||
|
|
} from '@/utils/tool.js';
|
|||
|
|
//常用文件格式
|
|||
|
|
const fileTypes = {
|
|||
|
|
pdf: ['pdf'],
|
|||
|
|
img: ['bmp', 'jpg', 'png', 'tif', 'gif', 'svg', 'psd', 'webp', 'apng'],
|
|||
|
|
video: ['mp4', 'avi', 'mpeg', 'mkv', 'mov', 'rmvb', 'flv', '3gp', 'wav'],
|
|||
|
|
word: ['doc', 'docx'],
|
|||
|
|
excel: ['xls', 'xlsx'],
|
|||
|
|
ppt: ['ppt', 'pptx'],
|
|||
|
|
txt: ['txt'],
|
|||
|
|
zip: ['zip', 'rar', '7z', 'iso'],
|
|||
|
|
}
|
|||
|
|
const fileTypeMap = new Map()
|
|||
|
|
for (const key of Object.keys(fileTypes)) {
|
|||
|
|
fileTypes[key].forEach(v => fileTypeMap.set(v, key))
|
|||
|
|
}
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
formProps: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
modelValue: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
readonly: Boolean
|
|||
|
|
},
|
|||
|
|
components: {},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showDisplay: false,
|
|||
|
|
showIframe: false,
|
|||
|
|
iframeUrl: "",
|
|||
|
|
isHide: false,
|
|||
|
|
fileList: [],
|
|||
|
|
fileMap: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
options() {
|
|||
|
|
return {
|
|||
|
|
url: this.url_config + 'wflow/res',
|
|||
|
|
header: {
|
|||
|
|
Authorization: "Bearer " + uni.getStorageSync('wflow-token'),
|
|||
|
|
},
|
|||
|
|
name: 'file',
|
|||
|
|
formData: {
|
|||
|
|
isImg: 'false'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
_value: {
|
|||
|
|
get() {
|
|||
|
|
return this.$props.modelValue || []
|
|||
|
|
},
|
|||
|
|
set(val) {
|
|||
|
|
this.$emit('update:modelValue', val)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.fileMap = new Map();
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// this.fileMap = new Map();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
if (!this.isHide && this.$refs.fileUpload) {
|
|||
|
|
this.$refs.fileUpload.show()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
console.log(this._value)
|
|||
|
|
this.fileList = this._value.map(f => {
|
|||
|
|
return {
|
|||
|
|
name: f.name,
|
|||
|
|
progress: 100,
|
|||
|
|
size: f.size,
|
|||
|
|
url: f.url,
|
|||
|
|
type: 'success'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (!this.$props.readonly) {
|
|||
|
|
//可编辑状态下设置文件的列表
|
|||
|
|
this.$refs.fileUpload.setFiles(this.fileList)
|
|||
|
|
}
|
|||
|
|
//由于webview层级最高，这个用来防止点击穿透,事件从uni-popup组件里面发射来
|
|||
|
|
uni.$on('hideFp', () => {
|
|||
|
|
//开发期间可能会偶发找不到ref组件实例的问题
|
|||
|
|
if (this.$refs.fileUpload) {
|
|||
|
|
this.isHide = true
|
|||
|
|
this.$refs.fileUpload.hide()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
uni.$on('showFp', () => {
|
|||
|
|
try {
|
|||
|
|
this.isHide = false
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (this.$refs.fileUpload) {
|
|||
|
|
this.$refs.fileUpload.show()
|
|||
|
|
}
|
|||
|
|
}, 800)
|
|||
|
|
} catch (e) {}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
uni.$off('hideFp')
|
|||
|
|
uni.$off('showFp')
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getFileImgByType(fileName) {
|
|||
|
|
console.log(fileTypeMap, fileName)
|
|||
|
|
const type = fileTypeMap.get(fileName.split('.').pop())
|
|||
|
|
return `/static/image/filetype/${(type || '') === '' ? 'file': type}.png`
|
|||
|
|
},
|
|||
|
|
resizeCollapse() {
|
|||
|
|
setTimeout(() => this.$emit('resize'), 800)
|
|||
|
|
},
|
|||
|
|
fileChange(file) {
|
|||
|
|
if (file instanceof Map) {
|
|||
|
|
this.fileList = []
|
|||
|
|
this.fileMap.clear()
|
|||
|
|
file.forEach((f) => {
|
|||
|
|
const fileM = {
|
|||
|
|
name: f.name,
|
|||
|
|
progress: f.progress,
|
|||
|
|
size: f.size,
|
|||
|
|
type: f.type
|
|||
|
|
}
|
|||
|
|
this.fileList.push(fileM)
|
|||
|
|
this.fileMap.set(f.name, fileM)
|
|||
|
|
})
|
|||
|
|
this.$refs.fileUpload.upload()
|
|||
|
|
}
|
|||
|
|
this.resizeCollapse();
|
|||
|
|
},
|
|||
|
|
onprogre(item) {
|
|||
|
|
this.fileMap.get(item.name).progress = item.progress
|
|||
|
|
},
|
|||
|
|
uploadEnd(file) {
|
|||
|
|
const fileM = this.fileMap.get(file.name)
|
|||
|
|
if (fileM) {
|
|||
|
|
fileM.type = file.type
|
|||
|
|
fileM.progress = file.progress
|
|||
|
|
if (file.type === 'success') {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '上传成功'
|
|||
|
|
})
|
|||
|
|
if (!Array.isArray(this._value)) {
|
|||
|
|
this._value = []
|
|||
|
|
}
|
|||
|
|
const _file = JSON.parse(file.responseText)
|
|||
|
|
//将文件
|
|||
|
|
saveFileTemp({
|
|||
|
|
id: _file.id,
|
|||
|
|
name: _file.name,
|
|||
|
|
path: file.path,
|
|||
|
|
size: this.getSize(file.size)
|
|||
|
|
})
|
|||
|
|
this._value.push(_file)
|
|||
|
|
//强制更新下数据
|
|||
|
|
this.$emit('update:modelValue', this._value)
|
|||
|
|
} else {
|
|||
|
|
//不保存
|
|||
|
|
this.removeFileTemp(file.name)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getType(url) {
|
|||
|
|
if (isImageLink(url)) {
|
|||
|
|
return "image"
|
|||
|
|
} else if (isVideoLink(url)) {
|
|||
|
|
return "video"
|
|||
|
|
} else {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
downFile(i) {
|
|||
|
|
// if (!this.$props.readonly) {
|
|||
|
|
// //可编辑状态下不能操作下载和查看
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
const file = this._value[i]
|
|||
|
|
// const fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
|
|||
|
|
// // 常见的图片文件后缀名
|
|||
|
|
// const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
|||
|
|
// // 视频类型列表
|
|||
|
|
// const videoTypes = ['mp4', 'webm', 'ogg'];
|
|||
|
|
// 判断文件后缀名是否在常见图片文件后缀名数组中
|
|||
|
|
|
|||
|
|
if (isVideoLink(`${this.url_config}image/${file.id}`) || isImageLink(`${this.url_config}image/${file.id}`)) {
|
|||
|
|
// 是图片和视频
|
|||
|
|
this.showDisplay = true;
|
|||
|
|
this.showIframe = true;
|
|||
|
|
this.iframeUrl = `${this.url_config}image/${file.id}`;
|
|||
|
|
} else {
|
|||
|
|
window.open(`${this.url_config}image/${file.id}`)
|
|||
|
|
}
|
|||
|
|
// openLocalFile(file.name, `${options.url}/${file.id}?name=${file.name}`)
|
|||
|
|
// openLocalFile(file.name, `${BASE_URL}/image/${file.id}`)
|
|||
|
|
},
|
|||
|
|
getSize(size) {
|
|||
|
|
if (size > 1048576) {
|
|||
|
|
return (size / 1048576).toFixed(1) + 'MB'
|
|||
|
|
} else if (size > 1024) {
|
|||
|
|
return (size / 1024).toFixed(1) + 'KB'
|
|||
|
|
} else {
|
|||
|
|
return size + 'B'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
deleteFile(i, file) {
|
|||
|
|
console.log(i, file)
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '您确认要删除该文件吗，删除后需要重新上传，确认删除？',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log(this._value[i])
|
|||
|
|
delFile(this._value[i].id).then(() => {
|
|||
|
|
this._value.splice(i, 1)
|
|||
|
|
this.$emit('update:modelValue',this. _value)
|
|||
|
|
this.fileMap.delete(file.name)
|
|||
|
|
this.fileList.splice(i, 1)
|
|||
|
|
this.$refs.fileUpload.clear(file.name)
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: err.msg || '删除文件失败'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
show(show = true) {
|
|||
|
|
if (show) {
|
|||
|
|
this.$refs.fileUpload.show()
|
|||
|
|
} else {
|
|||
|
|
this.$refs.fileUpload.hide()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.w-upload-btn {
|
|||
|
|
padding: 10rpx;
|
|||
|
|
background-color: #F7F7F7;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #b3b3b3;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w-file-list {
|
|||
|
|
&>view {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w-file {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 4rpx 20rpx;
|
|||
|
|
background-color: #F7F7F7;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w-file-name {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* 设置文本溢出时显示省略号 */
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fixed {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 9999;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, .3);
|
|||
|
|
display: none;
|
|||
|
|
|
|||
|
|
&.show {
|
|||
|
|
display: initial;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iframeMain {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 650rpx;
|
|||
|
|
font-size: 0;
|
|||
|
|
|
|||
|
|
.iframe {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 600rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|