145 lines
3.0 KiB
Vue
145 lines
3.0 KiB
Vue
<template>
|
|
<div class="component-container">
|
|
<!-- 上传组件 -->
|
|
<el-upload
|
|
ref="uploadRef"
|
|
action=""
|
|
class="single-uploader"
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:before-upload="handleBeforeUpload"
|
|
:on-exceed="handleExceed"
|
|
:limit="1"
|
|
:http-request="uploadImage"
|
|
>
|
|
<img v-if="imgUrl" :src="imgUrl" class="single-uploader-image"/>
|
|
|
|
<el-icon v-else class="single-uploader-icon">
|
|
<Plus/>
|
|
</el-icon>
|
|
|
|
<!-- 删除图标 -->
|
|
<el-icon
|
|
v-if="imgUrl"
|
|
class="single-uploader-remove-icon"
|
|
@click.stop="handleRemove(imgUrl)"
|
|
>
|
|
<Close/>
|
|
</el-icon>
|
|
</el-upload>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, ref} from "vue";
|
|
import {Plus, Close} from '@element-plus/icons-vue'
|
|
import {ElMessage, ElUpload} from "element-plus"
|
|
import {uploadFile, deleteFile} from "@/api/system/file";
|
|
import {UploadFile} from "element-plus/es/components/upload/src/upload.type";
|
|
|
|
const uploadRef = ref(ElUpload)
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const imgUrl = computed<string | null>({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(val) {
|
|
// imgUrl改变时触发修改父组件绑定的v-model的值
|
|
emit('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
|
|
/**
|
|
* 自定义图片上传
|
|
*
|
|
* @param params
|
|
*/
|
|
function uploadImage({file}: any) {
|
|
uploadFile(file).then(response => {
|
|
imgUrl.value = response.data
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 后选择文件覆盖前面的文件
|
|
*
|
|
* Set limit and on-exceed to automatically replace the previous file when select a new file.
|
|
*
|
|
* @param files
|
|
*/
|
|
function handleExceed(files: UploadFile[]) {
|
|
uploadRef.value.clearFiles()
|
|
uploadRef.value.handleStart(files[0])
|
|
uploadFile(files[0]).then(response => {
|
|
imgUrl.value = response.data
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除图片
|
|
*
|
|
* @param file
|
|
*/
|
|
function handleRemove(file: string) {
|
|
deleteFile(file)
|
|
imgUrl.value = null // 这里会触发imgUrl的computed的set方法
|
|
}
|
|
|
|
function handleBeforeUpload(file: any) {
|
|
const isJPG = file.type === 'image/jpeg'
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
/* if (!isJPG) {
|
|
ElMessage.warning("此文件非图片文件")
|
|
return false
|
|
}*/
|
|
|
|
if (!isLt2M) {
|
|
ElMessage.warning("上传图片不能大于2M")
|
|
}
|
|
return true
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.component-container{
|
|
.single-uploader {
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
&-icon{
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
text-align: center;
|
|
}
|
|
&-image{
|
|
width: 146px;
|
|
height: 146px;
|
|
display: block;
|
|
}
|
|
&-remove-icon {
|
|
font-size: 12px;
|
|
color: #ff4d51 !important;
|
|
margin-top: 0px !important;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|