|
|
@ -20,15 +20,19 @@ |
|
|
|
:on-preview="handlePreview" |
|
|
|
class="upload-file-uploader" |
|
|
|
> |
|
|
|
<el-button type="primary"><Icon icon="ep:upload-filled" />选取文件</el-button> |
|
|
|
<el-button type="primary"><Icon icon="ep:upload-filled" />{{ title }}</el-button> |
|
|
|
<template v-if="isShowTip" #tip> |
|
|
|
<div style="font-size: 8px"> |
|
|
|
<div style="font-size: 8px;margin-top: 10px;"> |
|
|
|
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
|
|
|
</div> |
|
|
|
<div style="font-size: 8px"> |
|
|
|
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件 |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-if="!isShowFile" #file > |
|
|
|
<div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</template> |
|
|
@ -56,13 +60,15 @@ const props = defineProps({ |
|
|
|
limit: propTypes.number.def(5), // 数量限制 |
|
|
|
autoUpload: propTypes.bool.def(true), // 自动上传 |
|
|
|
drag: propTypes.bool.def(false), // 拖拽上传 |
|
|
|
isShowTip: propTypes.bool.def(true) // 是否显示提示 |
|
|
|
isShowTip: propTypes.bool.def(true), // 是否显示提示 |
|
|
|
isShowFile: propTypes.bool.def(true), // 是否显示上传的文件 |
|
|
|
|
|
|
|
}) |
|
|
|
// ========== 上传相关 ========== |
|
|
|
const valueRef = ref(props.modelValue) |
|
|
|
const uploadRef = ref<UploadInstance>() |
|
|
|
const uploadList = ref<UploadUserFile[]>([]) |
|
|
|
const fileList = ref<UploadUserFile[]>(props.modelValue) |
|
|
|
const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([]) |
|
|
|
const uploadNumber = ref<number>(0) |
|
|
|
const uploadHeaders = ref({ |
|
|
|
Authorization: 'Bearer ' + getAccessToken(), |
|
|
@ -148,7 +154,7 @@ const listToString = (list: UploadUserFile[], separator?: string) => { |
|
|
|
|
|
|
|
:deep(.upload-file-list .el-upload-list__item) { |
|
|
|
position: relative; |
|
|
|
margin-bottom: 10px; |
|
|
|
// margin-bottom: 10px; |
|
|
|
line-height: 2; |
|
|
|
border: 1px solid #e4e7ed; |
|
|
|
} |
|
|
|