|
@ -6,7 +6,7 @@ |
|
|
name="file" |
|
|
name="file" |
|
|
v-model="valueRef" |
|
|
v-model="valueRef" |
|
|
v-model:file-list="fileList" |
|
|
v-model:file-list="fileList" |
|
|
:show-file-list="true" |
|
|
:show-file-list="isShowFileList" |
|
|
:auto-upload="autoUpload" |
|
|
:auto-upload="autoUpload" |
|
|
:action="updateUrl" |
|
|
:action="updateUrl" |
|
|
:headers="uploadHeaders" |
|
|
:headers="uploadHeaders" |
|
@ -28,6 +28,7 @@ |
|
|
<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> |
|
|
|
|
|
<Preview1 :fileList="fileList" v-if="!isShowFile"/> |
|
|
</template> |
|
|
</template> |
|
|
<template v-if="!isShowFile" #file > |
|
|
<template v-if="!isShowFile" #file > |
|
|
<div> |
|
|
<div> |
|
@ -42,6 +43,7 @@ import { PropType } from 'vue' |
|
|
import { propTypes } from '@/utils/propTypes' |
|
|
import { propTypes } from '@/utils/propTypes' |
|
|
import { getAccessToken, getTenantId } from '@/utils/auth' |
|
|
import { getAccessToken, getTenantId } from '@/utils/auth' |
|
|
import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile } from 'element-plus' |
|
|
import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile } from 'element-plus' |
|
|
|
|
|
import Preview1 from '@/components/UploadFile/src/Preview.vue' |
|
|
|
|
|
|
|
|
defineOptions({ name: 'UploadFile' }) |
|
|
defineOptions({ name: 'UploadFile' }) |
|
|
|
|
|
|
|
@ -63,19 +65,25 @@ const props = defineProps({ |
|
|
drag: propTypes.bool.def(false), // 拖拽上传 |
|
|
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), // 是否显示上传的文件 |
|
|
|
|
|
// isShowFileList: propTypes.bool.def(true), // 是否显示自己上传的文件 |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
// ========== 上传相关 ========== |
|
|
// ========== 上传相关 ========== |
|
|
|
|
|
// setTimeout(()=>{ |
|
|
|
|
|
|
|
|
|
|
|
// console.log('props.modelValue',props.modelValue) |
|
|
|
|
|
// },2000) |
|
|
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('88',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({ |
|
|
Authorization: 'Bearer ' + getAccessToken(), |
|
|
Authorization: 'Bearer ' + getAccessToken(), |
|
|
'tenant-id': getTenantId() |
|
|
'tenant-id': getTenantId() |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
// 文件上传之前判断 |
|
|
// 文件上传之前判断 |
|
|
const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { |
|
|
const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { |
|
|
if (fileList.value.length >= props.limit) { |
|
|
if (fileList.value.length >= props.limit) { |
|
@ -149,6 +157,14 @@ const listToString = (list: UploadUserFile[], separator?: string) => { |
|
|
} |
|
|
} |
|
|
return strs != '' ? strs.substr(0, strs.length - 1) : '' |
|
|
return strs != '' ? strs.substr(0, strs.length - 1) : '' |
|
|
} |
|
|
} |
|
|
|
|
|
watch( |
|
|
|
|
|
() => props.modelValue, |
|
|
|
|
|
(val) => { |
|
|
|
|
|
// if (val === unref(colorVal)) return |
|
|
|
|
|
valueRef.value = val |
|
|
|
|
|
fileList.value = val && val.length > 0 ?val:[] |
|
|
|
|
|
} |
|
|
|
|
|
) |
|
|
</script> |
|
|
</script> |
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.upload-file-uploader { |
|
|
.upload-file-uploader { |
|
|