mkm/engineering_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化上传附件功能，提升用户体验，提高操作效率。

Browse Source
This commit is contained in:
zmj 2024-06-01 15:12:41 +08:00
parent 7908d884f4
commit 01d3bb2143
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/uploadAnnex/index.vue
View File

@ -1,7 +1,7 @@
<template>
<el-upload :accept="acceptList" :show-file-list="true" aria-hidden="true" :headers="{ Token: userStore?.token }"
:action="base_url + '/upload/file'" :on-success="handleSuccess" ref="upload" :limit="100" multiple
:on-preview="previewFile" :on-remove="removeFile" :before-upload="checkSize">
:on-preview="previewFile" :on-remove="removeFile" :before-upload="checkSize" :file-list="fileList">
<template #tip>
<span class="text-primary" style="margin-left:5px;font-size:11px">提示:文件单个大小不能超过1个G</span>
</template>
@ -20,6 +20,7 @@ import useUserStore from "@/stores/modules/user";
const acceptList = reactive('doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, tar, jpg, png, gif, jpeg, webp, wmv, avi, mpg, mpeg, 3gp, mov, mp4, flv, f4v, rmvb, mkv')
const userStore = useUserStore();
const base_url = ref(configs.baseUrl + configs.urlPrefix)
const fileList = reactive([])
const props = defineProps({
formData: {
type: Object,
@ -31,6 +32,17 @@ const props = defineProps({
}
})
if (props.formData[props.value]) {
props.formData[props.value].forEach(item => {
fileList.push({
name: item.name,
uri: item.uri
})
})
}
const checkSize = (e) => {
if (e.size > 1024000000) {
ElMessage.error('文件大小不能超过1个G')
@ -47,19 +59,29 @@ const handleSuccess = (response: any) => {
const previewFile = (e: any) => {
if (!e.response) return
const a = document.createElement('a')
a.href = e.response?.data?.uri
if (e.uri) {
a.href = e.uri
} else {
if (!e.response) return
a.href = e.response?.data?.uri
}
a.target = '_blank'
a.click()
}
const removeFile = (e: any) => {
if (!e.response) return
let uri = e.response?.data?.uri
let index = props.formData[props.value].findIndex(item => item.uri == uri)
props.formData[props.value].splice(index, 1)
if (e.uri) {
let uri = e.uri
let index = props.formData[props.value].findIndex(item => item.uri == uri)
props.formData[props.value].splice(index, 1)
} else {
if (!e.response) return
let uri = e.response?.data?.uri
let index = props.formData[props.value].findIndex(item => item.uri == uri)
props.formData[props.value].splice(index, 1)
}
}
</script>