You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.5 KiB
121 lines
3.5 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-17 09:06:10
|
|
@ 备注: 图片空间
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
|
|
import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
|
|
import { uploadFiledTinymce } from '@/api/common/public'
|
|
import errimg from '@/assets/image/404_images/imgNotFound.png'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue?: string
|
|
disabled?: boolean
|
|
tablekey?: Object
|
|
data?: Object
|
|
formTableSetUp?: Object
|
|
imgUrl?: string
|
|
}>(),
|
|
{}
|
|
)
|
|
const emits = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
const value = computed({
|
|
get: () => {
|
|
if(props.data.control.imgUrl == ""){
|
|
return props.modelValue?props.modelValue:errimg;
|
|
}else{
|
|
return props.data.control.imgUrl
|
|
}
|
|
|
|
},
|
|
set: (newVal: any) => {
|
|
emits('update:modelValue', newVal)
|
|
return newVal
|
|
},
|
|
});
|
|
//组件css部分
|
|
const configStyle = computed(() => {
|
|
return props.data.styles || {}
|
|
})
|
|
|
|
|
|
|
|
const imgLoading = ref(false)
|
|
const imgPath = ref(errimg)
|
|
|
|
//文件上传的格式与大小
|
|
const beforeAvatarUpload = (rawFile) => {
|
|
imgLoading.value = true
|
|
// console.log("文件上传的格式与大小",rawFile.type)
|
|
let imgType = ['image/jpeg','image/jpg','image/png','image/gif','image/svg']
|
|
if (!imgType.includes(rawFile.type)) {
|
|
ElMessage.error('您上传的不是图片!')
|
|
imgLoading.value = false
|
|
return false
|
|
} else if (rawFile.size / 1024 / 1024 > 200) {
|
|
ElMessage.error('您上传到额图片大于 200MB!')
|
|
imgLoading.value = false
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
//上传成功回调
|
|
const handleAvatarSuccess = (
|
|
response,
|
|
uploadFile
|
|
) => {
|
|
// imageUrl.value = URL.createObjectURL(uploadFile.raw!)
|
|
// console.log("上传成功回调",value)
|
|
|
|
emits('update:modelValue', response.data.url)
|
|
imgPath.value = response.data.url
|
|
value.value=response.data.url
|
|
// console.log("上传成功回调---------->",value.value)
|
|
// let oldFormSetUp = props.formTableSetUp
|
|
// if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){
|
|
// oldFormSetUp.list.forEach((item)=>{
|
|
// if(item.name && item.name == props.data.name){
|
|
// // value.value = response.data.url
|
|
// // item.control.link = response.data.url
|
|
// value.set(response.data.url)
|
|
// emits('update:modelValue', response.data.url)
|
|
// console.log("上传成功回调------>",response.data.url)
|
|
// }
|
|
// })
|
|
// }
|
|
// props.setimgurl=response.data.url
|
|
// emits("update:imgUrl",response.data.url)
|
|
// console.log("上传成功回调------>",url.value)
|
|
// emits("updateCont",response.data.url)
|
|
|
|
imgLoading.value = false
|
|
}
|
|
const getFormItemInputStyle = (ele: any,sty:number) => {
|
|
if(ele?.inputStyle){
|
|
// console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
|
|
return AnalysisInputCss(ele?.inputStyle,sty)
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<el-upload
|
|
v-bind="$props"
|
|
class="upload-demo"
|
|
:action="uploadUrl"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
v-loading="imgLoading"
|
|
>
|
|
<!-- <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" /> -->
|
|
<img v-if="value" :src="value" class="avatar" :style="getFormItemInputStyle(configStyle,2)" />
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|