+
+ 大小不超过 {{ fileSize }}MB
+
+
+ 格式为 {{ fileType.join('/') }} 的文件
+
+
@@ -38,7 +47,7 @@ const props = defineProps({
fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
fileSize: propTypes.number.def(5), // 大小限制(MB)
limit: propTypes.number.def(5), // 数量限制
- isShowTip: propTypes.bool.def(false) // 是否显示提示
+ isShowTip: propTypes.bool.def(true) // 是否显示提示
})
// ========== 上传相关 ==========
const valueRef = ref(props.modelValue)
@@ -135,6 +144,9 @@ const handleRemove = (file) => {
emit('update:modelValue', listToString(fileList.value))
}
}
+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+ console.log(uploadFile)
+}
// 对象转成指定字符串分隔
const listToString = (list: UploadUserFile[], separator?: string) => {
let strs = ''
@@ -149,19 +161,22 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
.upload-file-uploader {
margin-bottom: 5px;
}
-.upload-file-list .el-upload-list__item {
+:deep(.upload-file-list .el-upload-list__item) {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
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;
justify-content: space-between;
align-items: center;
color: inherit;
}
-.ele-upload-list__item-content-action .el-link {
+:deep(.ele-upload-list__item-content-action .el-link) {
margin-right: 10px;
}
diff --git a/yudao-ui-admin-vue3/src/components/UploadFile/src/UploadImg.vue b/yudao-ui-admin-vue3/src/components/UploadFile/src/UploadImg.vue
index 72408f40b..9d7a8f0a6 100644
--- a/yudao-ui-admin-vue3/src/components/UploadFile/src/UploadImg.vue
+++ b/yudao-ui-admin-vue3/src/components/UploadFile/src/UploadImg.vue
@@ -6,7 +6,7 @@
name="file"
v-model="valueRef"
list-type="picture-card"
- :file-list="fileList"
+ v-model:file-list="fileList"
:show-file-list="true"
:action="updateUrl"
:headers="uploadHeaders"