java/ruoyi-vue-pro
1
0
Fork 0
mirror of https://github.com/YunaiV/ruoyi-vue-pro.git synced 2025-10-30 18:16:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: upload components

Browse Source
This commit is contained in:
xingyu
2022-12-07 00:10:48 +08:00
parent 860049d238
commit 88603ab8fe
2 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
yudao-ui-admin-vue3/src/components/UploadFile/src/UploadFile.vue
View File

@ -5,8 +5,8 @@
:multiple="props.limit > 1" :multiple="props.limit > 1"
name="file" name="file"
v-model="valueRef" v-model="valueRef"
:file-list="fileList" v-model:file-list="fileList"
:show-file-list="false" :show-file-list="true"
:action="updateUrl" :action="updateUrl"
:headers="uploadHeaders" :headers="uploadHeaders"
:limit="props.limit" :limit="props.limit"
@ -15,9 +15,18 @@
:on-success="handleFileSuccess" :on-success="handleFileSuccess"
:on-error="excelUploadError" :on-error="excelUploadError"
:on-remove="handleRemove" :on-remove="handleRemove"
:on-preview="handlePreview"
class="upload-file-uploader" class="upload-file-uploader"
> >
<Icon icon="ep:upload-filled" /> <el-button type="primary"><Icon icon="ep:upload-filled" />选取文件</el-button>
<template v-if="isShowTip" #tip>
<div style="font-size: 8px">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</div>
<div style="font-size: 8px">
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
</div>
</template>
</el-upload> </el-upload>
</div> </div>
</template> </template>
@ -38,7 +47,7 @@ const props = defineProps({
fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
fileSize: propTypes.number.def(5), // 大小限制(MB) fileSize: propTypes.number.def(5), // 大小限制(MB)
limit: propTypes.number.def(5), // 数量限制 limit: propTypes.number.def(5), // 数量限制
isShowTip: propTypes.bool.def(false) // 是否显示提示 isShowTip: propTypes.bool.def(true) // 是否显示提示
}) })
// ========== 上传相关 ========== // ========== 上传相关 ==========
const valueRef = ref(props.modelValue) const valueRef = ref(props.modelValue)
@ -135,6 +144,9 @@ const handleRemove = (file) => {
emit('update:modelValue', listToString(fileList.value)) emit('update:modelValue', listToString(fileList.value))
} }
} }
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
console.log(uploadFile)
}
// 对象转成指定字符串分隔 // 对象转成指定字符串分隔
const listToString = (list: UploadUserFile[], separator?: string) => { const listToString = (list: UploadUserFile[], separator?: string) => {
let strs = '' let strs = ''
@ -149,19 +161,22 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
.upload-file-uploader { .upload-file-uploader {
margin-bottom: 5px; margin-bottom: 5px;
} }
.upload-file-list .el-upload-list__item { :deep(.upload-file-list .el-upload-list__item) {
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;
line-height: 2; line-height: 2;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
} }
.upload-file-list .ele-upload-list__item-content { :deep(.el-upload-list__item-file-name) {
max-width: 250px;
}
:deep(.upload-file-list .ele-upload-list__item-content) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: inherit; color: inherit;
} }
.ele-upload-list__item-content-action .el-link { :deep(.ele-upload-list__item-content-action .el-link) {
margin-right: 10px; margin-right: 10px;
} }
</style> </style>

2
yudao-ui-admin-vue3/src/components/UploadFile/src/UploadImg.vue
View File

@ -6,7 +6,7 @@
name="file" name="file"
v-model="valueRef" v-model="valueRef"
list-type="picture-card" list-type="picture-card"
:file-list="fileList" v-model:file-list="fileList"
:show-file-list="true" :show-file-list="true"
:action="updateUrl" :action="updateUrl"
:headers="uploadHeaders" :headers="uploadHeaders"