78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<!-- 上传组件 -->
|
|
<el-upload
|
|
v-model="imgUrl"
|
|
class="single-uploader"
|
|
:show-file-list="false"
|
|
list-type="picture-card"
|
|
:before-upload="handleBeforeUpload"
|
|
:http-request="uploadFile"
|
|
>
|
|
<img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
|
|
<el-icon v-else class="single-uploader__icon"><i-ep-plus /></el-icon>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { UploadRawFile, UploadRequestOptions } from "element-plus";
|
|
import FileAPI from "@/api/file";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
const imgUrl = useVModel(props, "modelValue", emit);
|
|
|
|
/**
|
|
* 自定义图片上传
|
|
*
|
|
* @param options
|
|
*/
|
|
async function uploadFile(options: UploadRequestOptions): Promise<any> {
|
|
const data = await FileAPI.upload(options.file);
|
|
imgUrl.value = data.url;
|
|
}
|
|
|
|
/**
|
|
* 限制用户上传文件的格式和大小
|
|
*/
|
|
function handleBeforeUpload(file: UploadRawFile) {
|
|
if (file.size > 2 * 1048 * 1048) {
|
|
ElMessage.warning("上传图片不能大于2M");
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.single-uploader {
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 1px var(--el-border-color) solid;
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
&__image {
|
|
display: block;
|
|
width: 178px;
|
|
height: 178px;
|
|
}
|
|
|
|
&___icon {
|
|
width: 178px;
|
|
height: 178px;
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|