|
@ -8,10 +8,11 @@ |
|
|
v-model:file-list="fileList" |
|
|
v-model:file-list="fileList" |
|
|
:show-file-list="true" |
|
|
:show-file-list="true" |
|
|
:auto-upload="autoUpload" |
|
|
:auto-upload="autoUpload" |
|
|
:action="updateUrl+'?tableId='+upData?.tableId+'&tableName='+ upData?.tableName" |
|
|
:action="updateUrl + '?tableId=' + upData?.tableId + '&tableName=' + upData?.tableName" |
|
|
:headers="uploadHeaders" |
|
|
:headers="uploadHeaders" |
|
|
:limit="props.limit" |
|
|
:limit="props.limit" |
|
|
:drag="drag" |
|
|
:drag="drag" |
|
|
|
|
|
:accept="fileType.join(',')" |
|
|
:before-upload="beforeUpload" |
|
|
:before-upload="beforeUpload" |
|
|
:on-exceed="handleExceed" |
|
|
:on-exceed="handleExceed" |
|
|
:on-success="handleFileSuccess" |
|
|
:on-success="handleFileSuccess" |
|
@ -26,8 +27,9 @@ |
|
|
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
|
|
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
|
|
</div> |
|
|
</div> |
|
|
<div style="font-size: 8px;line-height: initial;"> |
|
|
<div style="font-size: 8px;line-height: initial;"> |
|
|
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件 |
|
|
格式为 <b style="color: #f56c6c">{{ fileType.join(',') }}</b> 的文件 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<Preview/> |
|
|
</template> |
|
|
</template> |
|
|
<template v-if="!isShowFile" #file > |
|
|
<template v-if="!isShowFile" #file > |
|
|
<div> |
|
|
<div> |
|
@ -38,6 +40,7 @@ |
|
|
</template> |
|
|
</template> |
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { PropType } from 'vue' |
|
|
import { PropType } from 'vue' |
|
|
|
|
|
import Preview from '@/components/UploadFile/src/Preview' |
|
|
|
|
|
|
|
|
import { propTypes } from '@/utils/propTypes' |
|
|
import { propTypes } from '@/utils/propTypes' |
|
|
import { getAccessToken, getTenantId } from '@/utils/auth' |
|
|
import { getAccessToken, getTenantId } from '@/utils/auth' |
|
@ -60,15 +63,16 @@ const props = defineProps({ |
|
|
fileSize: propTypes.number.def(5), // 大小限制(MB) |
|
|
fileSize: propTypes.number.def(5), // 大小限制(MB) |
|
|
limit: propTypes.number.def(5), // 数量限制 |
|
|
limit: propTypes.number.def(5), // 数量限制 |
|
|
autoUpload: propTypes.bool.def(true), // 自动上传 |
|
|
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), // 是否显示上传的文件 |
|
|
isShowFile: propTypes.bool.def(true), // 是否显示上传的文件 |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
console.log('props.upData',props.upData) |
|
|
// ========== 上传相关 ========== |
|
|
// ========== 上传相关 ========== |
|
|
const valueRef = ref(props.modelValue) |
|
|
const valueRef = ref(props.modelValue) |
|
|
const uploadRef = ref<UploadInstance>() |
|
|
const uploadRef = ref<UploadInstance>() |
|
|
const uploadList = ref<UploadUserFile[]>([]) |
|
|
const uploadList = ref<UploadUserFile[]>([]) |
|
|
|
|
|
console.log('props.modelValue',props.modelValue) |
|
|
const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([]) |
|
|
const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([]) |
|
|
const uploadNumber = ref<number>(0) |
|
|
const uploadNumber = ref<number>(0) |
|
|
const uploadHeaders = ref({ |
|
|
const uploadHeaders = ref({ |
|
@ -91,7 +95,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { |
|
|
}) |
|
|
}) |
|
|
const isLimit = file.size < props.fileSize * 1024 * 1024 |
|
|
const isLimit = file.size < props.fileSize * 1024 * 1024 |
|
|
if (!isImg) { |
|
|
if (!isImg) { |
|
|
message.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`) |
|
|
message.error(`文件格式不正确, 请上传${props.fileType.join(',')}格式!`) |
|
|
return false |
|
|
return false |
|
|
} |
|
|
} |
|
|
if (!isLimit) { |
|
|
if (!isLimit) { |
|
@ -136,7 +140,9 @@ const handleRemove = (file) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
const handlePreview: UploadProps['onPreview'] = (uploadFile) => { |
|
|
const handlePreview: UploadProps['onPreview'] = (uploadFile) => { |
|
|
console.log(uploadFile) |
|
|
console.log('uploadFile',uploadFile) |
|
|
|
|
|
window.open(uploadFile.url) |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
// 对象转成指定字符串分隔 |
|
|
// 对象转成指定字符串分隔 |
|
|
const listToString = (list: UploadUserFile[], separator?: string) => { |
|
|
const listToString = (list: UploadUserFile[], separator?: string) => { |
|
|