1

src/components/BasicForm/src/form-items.vue

@@ -130,7 +130,7 @@ onMounted(() => {
         </template>
         <template v-if="item.type === 'img_upload_list'">
           <ImageUploadList
-            v-model:url="formData[item.field]"
+            v-model:urls="formData[item.field]"
             :descs="['小于1Mb']"
             :disabled="disabled"
             :types="['png', 'jpg', 'jpeg']"

src/components/UploadList/src/image copy.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useVModel } from "@vueuse/core";
-import { ElMessage } from "element-plus";
-import { useRenderIcon } from "../../ReIcon/src/hooks";
-import { httpImgUpload } from "/@/api/components/upload";
-import { useResponseHandle } from "/@/hooks/useAsync";
-import { getToken } from "/@/utils/auth";
-import { loadEnv } from "@build/index";
-import { Delete, ZoomIn } from "@element-plus/icons-vue";
-import type { UploadFile, UploadProps, UploadUserFile } from "element-plus";
-const emit = defineEmits(["change", "update:url"]);
-
-const props = withDefaults(
-  defineProps<{
-    showProps?: boolean;
-    descs?: string[];
-    types?: string[];
-    size?: number;
-    url: string[];
-  }>(),
-  {
-    size: 1
-  }
-);
-const { VITE_PROXY_DOMAIN_REAL } = loadEnv();
-const imageUrl = useVModel(props, "url");
-
-const baseUrl = `${VITE_PROXY_DOMAIN_REAL}storage/`;
-
-const token = getToken();
-
-const imageTypes = computed(() => {
-  const { types } = props;
-  return types.map(type => "image/" + type);
-});
-
-const responseHandle = useResponseHandle();
-
-const onBeforeImageUpload: UploadProps["beforeUpload"] = ({ type, size }) => {
-  if (!imageTypes.value.includes(type)) {
-    ElMessage.warning(`请上传${props.types.join(".")}类型的图片`);
-    return false;
-  }
-
-  if (size / 1024 / 1024 > props.size) {
-    ElMessage.warning("图片大小超过" + props.size + "M");
-    return false;
-  }
-};
-const dialogImageUrl = ref("");
-const dialogVisible = ref(false);
-const disabled = ref(false);
-const url = ref("");
-// const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
-//   console.log(uploadFile, uploadFiles);
-// };
-
-// const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
-//   dialogImageUrl.value = uploadFile.url!;
-//   dialogVisible.value = true;
-// };
-const handleRequest: UploadProps["httpRequest"] = async ({ file }) => {
-  const _formData = new FormData();
-  _formData.append("image", file);
-  _formData.append("token", token);
-
-  const { message, code, data } = await httpImgUpload(_formData);
-
-  responseHandle({
-    message,
-    code,
-    handler: () => {
-      url.value = baseUrl + data[0].url;
-    }
-  });
-};
-const handleSuccess: UploadProps["onSuccess"] = () => {
-  console.log(url.value);
-  imageUrl.value.push(url.value);
-  emit("change", url.value);
-};
-const handleRemove = (file: UploadFile, index: number) => {
-  console.log(file);
-  console.log(index);
-};
-
-const handlePictureCardPreview = (file: UploadFile) => {
-  dialogImageUrl.value = file.url!;
-  dialogVisible.value = true;
-};
-
-const handleDownload = (file: UploadFile) => {
-  console.log(file);
-};
-</script>
-
-<template>
-  <!-- :on-preview="handlePictureCardPreview" -->
-  <!-- :on-remove="handleRemove " -->
-  <ElUpload
-    class="avatar-uploader"
-    list-type="picture-card"
-    :http-request="handleRequest"
-    :before-upload="onBeforeImageUpload"
-    :on-success="handleSuccess"
-    :multiple="true"
-    :show-file-list="true"
-  >
-    <ElButton class="avatar-uploader-icon" :icon="useRenderIcon('plus')" />
-    <template #file="{ file }">
-      {{ file }}
-      <!-- <div>
-        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-        <span class="el-upload-list__item-actions">
-          <span
-            class="el-upload-list__item-preview"
-            @click="handlePictureCardPreview(file)"
-          >
-            <el-icon><zoom-in /></el-icon>
-          </span>
-          <span
-            v-if="!disabled"
-            class="el-upload-list__item-delete"
-            @click="handleRemove(file, file.index)"
-          >
-            <el-icon><Delete /></el-icon>
-          </span>
-        </span>
-      </div> -->
-    </template>
-  </ElUpload>
-  <el-dialog v-model="dialogVisible">
-    <img w-full :src="dialogImageUrl" alt="Preview Image" />
-  </el-dialog>
-</template>
-
-<style scoped>
-.avatar-uploader .avatar {
-  width: 55px;
-  height: 55px;
-  display: block;
-}
-
-.avatar-uploader-icon {
-  font-size: 31px;
-  height: 55px !important;
-}
-</style>