81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
GlobalInjectKeyConst,
|
|
type GlobalInjectUploadFileToOSS,
|
|
} from "~/types/common";
|
|
import { ref } from "vue";
|
|
|
|
interface Props {
|
|
title?: string; // 标题，显示在上传按钮上方
|
|
paramName?: string;
|
|
params?: { name: string; param?: string }[];
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title: "",
|
|
paramName: "upload_image_path",
|
|
});
|
|
|
|
const { useUtilsUploadFileToOSS } = inject<GlobalInjectUploadFileToOSS>(
|
|
GlobalInjectKeyConst.UploadFileToOSS,
|
|
{
|
|
useUtilsUploadFileToOSS: async (file: File | Blob, filename?: string) => "",
|
|
},
|
|
);
|
|
|
|
const image = ref<string | undefined>();
|
|
|
|
const handleSetImage = (url: string) => {
|
|
image.value = url;
|
|
};
|
|
const pageSize = ref<number>(8);
|
|
|
|
const handleUploadImg = async (image?: string) => {
|
|
if (!image) return;
|
|
if (image.startsWith("http")) {
|
|
return image;
|
|
}
|
|
|
|
const blob = await ImageUrlToBlob(image);
|
|
|
|
const fileName = `upload_image_${new Date().getTime()}.png`;
|
|
return await useUtilsUploadFileToOSS(blob, fileName);
|
|
};
|
|
|
|
const handleBindParams = async () => {
|
|
return {
|
|
[props.paramName]: await handleUploadImg(image.value),
|
|
};
|
|
};
|
|
|
|
defineExpose({
|
|
handleBindParams,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-[460px] mt-1">
|
|
<div class="flex items-center py-1">
|
|
<icon name="icon-park:upload-picture" size="20" class="mr-1" />
|
|
{{ title || "图片上传" }}
|
|
</div>
|
|
<div class="flex flex-col items-center border rounded">
|
|
<!-- 图片上传、预览区域 -->
|
|
<div class="h-48 w-full flex justify-center">
|
|
<!-- 显示选中图片 -->
|
|
<div v-if="image" class="p-2 w-full">
|
|
<ImagePreviewWithUpload v-model="image" />
|
|
</div>
|
|
|
|
<!-- 图片上传 -->
|
|
<ImageUploadDropPasteClick v-else v-model="image" />
|
|
</div>
|
|
<div>
|
|
<RecommendedImages v-model="pageSize" @update-image="handleSetImage" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|