<!--
|
* @Description:
|
* @Version: 2.0
|
* @Autor: wuyun
|
* @Date: 2023-09-12 09:36:23
|
* @LastEditors: wuyun
|
* @LastEditTime: 2024-09-05 11:45:39
|
-->
|
<template>
|
<div>
|
<div class="upload">
|
<el-upload
|
class="avatar-uploader"
|
action="#"
|
:show-file-list="false"
|
:http-request="uplodFile"
|
:before-upload="beforeAvatarUpload"
|
>
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
</el-upload>
|
<span v-if="imageUrl" class="el-upload-list__item-preview">
|
<el-image
|
class="icon"
|
:src="rightIcon"
|
fit="cover"
|
:preview-src-list="[imageUrl]"
|
>
|
</el-image>
|
</span>
|
<el-icon
|
v-if="imageUrl"
|
@click="clearUploadFile"
|
class="avatar-uploader-delete"
|
><Delete
|
/></el-icon>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from 'vue'
|
import { Plus } from '@element-plus/icons-vue'
|
import type { UploadFile, UploadProps } from 'element-plus'
|
// import httpService from '@/api/axios'
|
// import rightIcon from '@/assets/images/fd.png'
|
import commonApi from '@/api/commonApi'
|
import { getAssetsImages } from '@/utils/common'
|
const rightIcon = getAssetsImages('fd.png')
|
|
const emit = defineEmits(['update:fileList', 'beginUpload'])
|
const dialogImageUrl = ref('')
|
const dialogVisible = ref(false)
|
const imageUrl = ref('')
|
const iconVisible = ref<any>('none')
|
const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
response,
|
uploadFile
|
) => {
|
imageUrl.value = URL.createObjectURL(uploadFile.raw!)
|
}
|
// 自定义上传文件
|
const uplodFile = (option: any) => {
|
// compressImg(option.file, 1024).then((comRes: any) => {
|
let formData: any = new FormData()
|
formData.append('file', option.file)
|
commonApi.uploadFile(formData).then((res: any) => {
|
if (res.code == 200) {
|
imageUrl.value = URL.createObjectURL(option.file)
|
emit('update:fileList', res.data.fileId)
|
ElNotification({
|
type: 'success',
|
message: '上传成功！',
|
})
|
} else {
|
ElNotification({
|
type: 'error',
|
message: '上传失败，请重试！',
|
})
|
}
|
})
|
// return new Promise((resolve, reject) => {
|
// // 调用上传文件方法
|
// httpService({
|
// url: '/file/upload',
|
// headers: {
|
// 'Content-Type': 'multipart/form-data',
|
// },
|
// data: param,
|
// })
|
// .then((res) => {
|
// if (res.code == 200) {
|
// imageUrl.value = URL.createObjectURL(option.file)
|
// emit('update:imageId', res.data)
|
// resolve(true)
|
// } else {
|
// }
|
// })
|
// .finally(() => {})
|
// })
|
// })
|
}
|
// 图片压缩
|
// const compressImg = (file: any, limit: any) => {
|
// return new Promise((resolve) => {
|
// if (file.size > limit) {
|
// imageConversion.compressAccurately(file, limit).then((res) => {
|
// resolve(res)
|
// })
|
// } else {
|
// resolve(file)
|
// }
|
// })
|
// }
|
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
if (
|
rawFile.type !== 'image/jpeg' &&
|
rawFile.type !== 'image/jpg' &&
|
rawFile.type !== 'image/png' &&
|
rawFile.type !== 'image/bmp' &&
|
rawFile.type !== 'image/gif'
|
) {
|
ElMessage.error('只能上传图片格式!')
|
return false
|
} else if (rawFile.size >= 10485760) {
|
ElMessage.error('上传文件过大!')
|
return false
|
}
|
return true
|
}
|
const handlePictureCardPreview = (file?: UploadFile) => {
|
dialogVisible.value = true
|
dialogImageUrl.value = imageUrl.value
|
}
|
const getPicUrlFun = (url: string) => {
|
imageUrl.value = url
|
}
|
const clearUploadFile = () => {
|
imageUrl.value = ''
|
emit('update:fileList', '')
|
}
|
const clearImgUrl = () => {
|
imageUrl.value = ''
|
}
|
defineExpose({ getPicUrlFun, clearUploadFile })
|
</script>
|
<style lang="scss" scoped>
|
.upload {
|
position: relative;
|
}
|
.avatar-uploader .avatar {
|
width: 100px;
|
height: 100px;
|
display: block;
|
}
|
.avatar-uploader-delete {
|
position: absolute;
|
left: 110px;
|
top: 5px;
|
font-size: 16px;
|
font-weight: 600;
|
cursor: pointer;
|
color: #666;
|
&:hover {
|
color: #007cee;
|
}
|
}
|
</style>
|
<style>
|
.avatar-uploader .el-upload {
|
border: 1px dashed var(--el-border-color);
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
transition: var(--el-transition-duration-fast);
|
}
|
|
.avatar-uploader .el-upload:hover {
|
border-color: var(--el-color-primary);
|
}
|
|
.el-icon.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 100px;
|
height: 100px;
|
text-align: center;
|
}
|
.el-upload-list__item-preview {
|
position: absolute;
|
right: 3px;
|
top: 3px;
|
width: 20px;
|
height: 20px;
|
display: block;
|
.icon {
|
cursor: pointer;
|
}
|
}
|
/* .upload {
|
&:hover{
|
.el-upload-list__item-preview{
|
position: absolute;
|
right: 5px;
|
top:5px;
|
width: 24px;
|
height: 24px;
|
display: block;
|
.icon{
|
cursor: pointer;
|
}
|
}
|
}
|
} */
|
</style>
|
