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

This commit is contained in:
zmj 2024-05-31 11:45:01 +08:00
parent e16e2b717e
commit 625578a4b1

View File

@ -1,15 +1,15 @@
<template> <template>
<el-upload <el-upload :accept="acceptList" :show-file-list="true" aria-hidden="true" :headers="{ Token: userStore?.token }"
accept="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" :action="base_url + '/upload/file'" :on-success="handleAvatarSuccess" ref="upload" :limit="100" multiple
:show-file-list="true" aria-hidden="true" :headers="{ Token: userStore?.token }" :action="base_url + '/upload/file'" :on-preview="previewFile" :on-remove="removeFile" :before-upload="checkSize">
:on-success="handleAvatarSuccess" ref="upload" :limit="100" multiple :on-preview="previewFile"
:on-remove="removeFile">
<template #tip> <template #tip>
<span class="text-primary" style="margin-left:5px;font-size:11px">提示:文件单个大小不能超过1个G</span> <span class="text-primary" style="margin-left:5px;font-size:11px">提示:文件单个大小不能超过1个G</span>
</template> </template>
<el-button type="primary"> <template #default>
上传 <el-button type="primary">
</el-button> 上传
</el-button>
</template>
</el-upload> </el-upload>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -17,6 +17,7 @@ import { ref, defineProps } from "vue"
import configs from "@/config" import configs from "@/config"
import useUserStore from "@/stores/modules/user"; 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 userStore = useUserStore();
const base_url = ref(configs.baseUrl + configs.urlPrefix) const base_url = ref(configs.baseUrl + configs.urlPrefix)
const props = defineProps({ const props = defineProps({
@ -30,6 +31,14 @@ const props = defineProps({
} }
}) })
const checkSize = (e) => {
if (e.size > 1024000000) {
ElMessage.error('文件大小不能超过1个G')
return false
}
}
const handleAvatarSuccess = (response: any) => { const handleAvatarSuccess = (response: any) => {
props.formData[props.value] ||= [] props.formData[props.value] ||= []
// @ts-ignore // @ts-ignore