添加上传图片组件

src/components/Upload/VbUpload.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { UploadFile, UploadProps } from "element-plus"
+import { ref, withDefaults, onMounted, computed } from "vue"
+import { Plus } from "@element-plus/icons-vue"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    uploadUrl?: string
+    fileList?: Array<UploadFile>
+    listType?: "picture" | "picture-card" | "text"
+  }>(),
+  {
+    uploadUrl: "/api/file/upload/putObject",
+    listType: "picture-card",
+    fileList: () => {
+      return []
+    },
+  }
+)
+const emits = defineEmits<{
+  (e: "update:modelValue", v: string): void
+  (e: "update:fileList", v: Array<UploadFile>): void
+  (e: "remove", uploadFile: UploadFile, uploadFiles: Array<UploadFile>): void
+}>()
+const fileList = ref(props.fileList)
+const dialogImageUrl = ref("")
+const dialogVisible = ref(false)
+const fileUrls = computed(() => {
+  const result: string[] = []
+  fileList.value.forEach(function (item: any) {
+    result.push(item.response.data.filePath)
+  })
+  return result.join(",")
+})
+
+const onRemove: UploadProps["onRemove"] = (uploadFile: UploadFile, uploadFiles: Array<UploadFile>) => {
+  emits("remove", uploadFile, uploadFiles)
+  emits("update:modelValue", fileUrls.value)
+  emits("update:fileList", fileList.value)
+}
+
+const onPreview: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
+  if (uploadFile.url) {
+    dialogImageUrl.value = uploadFile.url
+    dialogVisible.value = true
+  }
+}
+
+const onChange: UploadProps["onChange"] = () => {
+  //console.log("CHANGE____", fileList.value, fileUrls.value)
+  emits("update:modelValue", fileUrls.value)
+  emits("update:fileList", fileList.value)
+}
+const uploadEl = ref()
+function clearFiles() {
+  uploadEl.value.clearFiles()
+}
+function init() {
+  //
+}
+
+onMounted(() => {
+  init()
+})
+defineExpose({ clearFiles })
+</script>
+<template>
+  <el-upload
+    ref="uploadEl"
+    v-model:file-list="fileList"
+    :action="uploadUrl"
+    :list-type="listType"
+    v-bind="$attrs"
+    :on-preview="onPreview"
+    :on-remove="onRemove"
+    :on-change="onChange"
+  >
+    <el-icon><Plus /></el-icon>
+  </el-upload>
+  <el-dialog v-model="dialogVisible">
+    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+  </el-dialog>
+</template>