From 08230c534315983c7aaf4c8d598880d56337a0f9 Mon Sep 17 00:00:00 2001
From: zjl <xx@163.com>
Date: Tue, 8 Oct 2024 14:08:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=8A=E4=BC=A0=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/Image.vue           | 690 +++++++++++-----------
 src/components/Upload/Images.vue          | 513 ++++++++--------
 src/components/Upload/cropper.vue         | 320 +++++-----
 src/components/Upload/file.vue            | 376 ++++++------
 src/components/Upload/src/BasicUpload.vue |   2 +-
 5 files changed, 959 insertions(+), 942 deletions(-)

diff --git a/src/components/Upload/Image.vue b/src/components/Upload/Image.vue
index d165d9b..0e341d9 100644
--- a/src/components/Upload/Image.vue
+++ b/src/components/Upload/Image.vue
@@ -1,365 +1,365 @@
 <template>
-	<div class="upload-box">
-		<el-upload
-			action="#"
-			:id="uuid"
-			:class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
-			:multiple="false"
-			:disabled="loading?true:self_disabled"
-			:show-file-list="false"
-			:http-request="handleHttpUpload"
-			:before-upload="beforeUpload"
-			:on-error="uploadError"
-			:drag="drag"
-			:accept="fileType.join(',')"
-		>
-			<template v-if="imageUrl">
-				<img v-if="imageUrl.indexOf('.pdf')<0" :src="imageUrl" class="upload-image" />
-        <div v-else class="upload-image">{{imageUrl}}</div>
-				<div class="upload-handle" @click.stop>
-					<div class="handle-icon" @click="editImg" v-if="!self_disabled">
-						<el-icon :size="props.iconSize">
-							<Edit />
-						</el-icon>
-					</div>
-					<div class="handle-icon" @click="viewImg">
-						<el-icon :size="props.iconSize">
-							<ZoomIn />
-						</el-icon>
-					</div>
-					<div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
-						<el-icon :size="props.iconSize">
-							<Delete />
-						</el-icon>
-					</div>
-				</div>
-			</template>
-			<template v-else>
-				<div class="upload-empty">
-					<slot name="empty">
-						<el-icon v-if="!loading"><Plus /></el-icon>
-            			<span v-else>上传中{{progress}}%</span>
-						<!-- <span>请上传图片</span> -->
-					</slot>
-				</div>
-			</template>
-		</el-upload>
-		<div class="el-upload__tip">
-			<slot name="tip"></slot>
-		</div>
-		<el-image-viewer
-			:teleported="true"
-			v-if="imgViewVisible"
-			@close="imgViewVisible = false"
-			:url-list="[imageUrl]"
-		/>
-	</div>
-	<Cropper
-      v-model:visible="cropperVisible"
-      v-if="cropperVisible"
-      :cropperSize="cropperSize"
-      :oImg="oImg"
-      @success="cropperSuccess"
-      :fileName="fileName"
-  ></Cropper>
+  <div class="upload-box">
+    <el-upload
+      action="#"
+      :id="uuid"
+      :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+      :multiple="false"
+      :disabled="loading ? true : self_disabled"
+      :show-file-list="false"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <template v-if="imageUrl">
+        <img v-if="imageUrl.indexOf('.pdf') < 0" :src="imageUrl" class="upload-image" />
+        <div v-else class="upload-image">{{ imageUrl }}</div>
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="editImg" v-if="!self_disabled">
+            <el-icon :size="props.iconSize">
+              <Edit />
+            </el-icon>
+          </div>
+          <div class="handle-icon" @click="viewImg">
+            <el-icon :size="props.iconSize">
+              <ZoomIn />
+            </el-icon>
+          </div>
+          <div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
+            <el-icon :size="props.iconSize">
+              <Delete />
+            </el-icon>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="upload-empty">
+          <slot name="empty">
+            <el-icon v-if="!loading"><Plus /></el-icon>
+            <span v-else>上传中{{ progress }}%</span>
+            <!-- <span>请上传图片</span> -->
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer
+      :teleported="true"
+      v-if="imgViewVisible"
+      @close="imgViewVisible = false"
+      :url-list="[imageUrl]"
+    />
+  </div>
+  <Cropper
+    v-model:visible="cropperVisible"
+    v-if="cropperVisible"
+    :cropperSize="cropperSize"
+    :oImg="oImg"
+    @success="cropperSuccess"
+    :fileName="fileName"
+  />
 </template>
 
 <script setup lang="ts" name="UploadImg">
-import { ref, computed, inject } from 'vue';
-import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
-import type { UploadProps, UploadRequestOptions } from 'element-plus';
-import { generateUUID } from '@/utils/auth';
-import {upload} from '@/api/common'
-import Cropper from '@/components/Upload/cropper.vue'
+  import { ref, computed, inject } from 'vue';
+  import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
+  import type { UploadProps, UploadRequestOptions } from 'element-plus';
+  import { generateUUID } from '@/utils/auth';
+  import { upload } from '@/api/common';
+  import Cropper from '@/components/Upload/cropper.vue';
 
-interface UploadFileProps {
-	imageUrl?: string; // 图片地址 ==> 必传
-	uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
-	drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
-	disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
-	fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
-	fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
-	height?: string; // 组件高度 ==> 非必传（默认为 150px）
-	width?: string; // 组件宽度 ==> 非必传（默认为 150px）
-	borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
-	iconSize?: number;
-  	name?: string;
-	cropper:Boolean,
-	cropperSize?:Object
-}
-
-const cropperVisible=ref(false)
-// 接受父组件参数
-const props = withDefaults(defineProps<UploadFileProps>(), {
-	imageUrl: '',
-	uploadFileUrl: '/admin/file/upload',
-	drag: true,
-	disabled: false,
-	fileSize: 5,
-	fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
-	height: '150px',
-	width: '150px',
-	borderRadius: '8px',
-	name:'',
-	cropper:false,
-  	cropperSize:null
-});
-
-// 生成组件唯一id
-const uuid = ref('id-' + generateUUID());
-
-const viewImg=()=>{
-  if(props.imageUrl.indexOf('.pdf')<0){
-    imgViewVisible.value = true
-  }else{
-    window.open(props.imageUrl)
+  interface UploadFileProps {
+    imageUrl?: string; // 图片地址 ==> 必传
+    uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+    drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+    disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+    fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+    fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+    height?: string; // 组件高度 ==> 非必传（默认为 150px）
+    width?: string; // 组件宽度 ==> 非必传（默认为 150px）
+    borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+    iconSize?: number;
+    name?: string;
+    cropper: Boolean;
+    cropperSize?: Object;
   }
-}
 
-// 查看图片
-const imgViewVisible = ref(false);
-// 获取 el-form 组件上下文
-const formContext = inject(formContextKey, void 0);
-// 获取 el-form-item 组件上下文
-const formItemContext = inject(formItemContextKey, void 0);
-// 判断是否禁用上传和删除
-const self_disabled = computed(() => {
-	return props.disabled || formContext?.disabled;
-});
+  const cropperVisible = ref(false);
+  // 接受父组件参数
+  const props = withDefaults(defineProps<UploadFileProps>(), {
+    imageUrl: '',
+    uploadFileUrl: '/admin/file/upload',
+    drag: true,
+    disabled: false,
+    fileSize: 5,
+    fileType: () => ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
+    height: '120px',
+    width: '120px',
+    borderRadius: '8px',
+    name: '',
+    cropper: false,
+    cropperSize: null,
+  });
 
-/**
- * @description 图片上传
- * @param options upload 所有配置项
- * */
-interface UploadEmits {
-	(e: 'update:imageUrl', value: string): void,
-  (e: 'changeFileName', value: string): void;
-}
+  // 生成组件唯一id
+  const uuid = ref('id-' + generateUUID());
 
-const fileName=ref('')
-const oImg=ref('')
-const emit = defineEmits<UploadEmits>();
-const loading=ref(false)
-const progress=ref(0)
-const cropperSuccess=(fileChile:any)=>{
-  actionFile(fileChile)
-}
-const actionFile=async (fileChild:any)=>{
-  loading.value=true
-  try {
-	const formData = new FormData()
-    formData.append('file',fileChild)
-    formData.append('name',props.name)
-    const res =await upload(formData)
-    emit('update:imageUrl',res.fileUrl);
-    emit('changeFileName',res.originalName)
-    // 调用 el-form 内部的校验方法（可自动校验）
-    formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
-  } catch (error) {
-    emit('update:imageUrl','');
-    emit('changeFileName','')
-  }finally {
-    progress.value=0
-    loading.value=false
+  const viewImg = () => {
+    if (props.imageUrl.indexOf('.pdf') < 0) {
+      imgViewVisible.value = true;
+    } else {
+      window.open(props.imageUrl);
+    }
+  };
+
+  // 查看图片
+  const imgViewVisible = ref(false);
+  // 获取 el-form 组件上下文
+  const formContext = inject(formContextKey, void 0);
+  // 获取 el-form-item 组件上下文
+  const formItemContext = inject(formItemContextKey, void 0);
+  // 判断是否禁用上传和删除
+  const self_disabled = computed(() => {
+    return props.disabled || formContext?.disabled;
+  });
+
+  /**
+   * @description 图片上传
+   * @param options upload 所有配置项
+   * */
+  interface UploadEmits {
+    (e: 'update:imageUrl', value: string): void;
+    (e: 'changeFileName', value: string): void;
   }
-}
 
-const handleHttpUploadOptions=ref({})
+  const fileName = ref('');
+  const oImg = ref('');
+  const emit = defineEmits<UploadEmits>();
+  const loading = ref(false);
+  const progress = ref(0);
+  const cropperSuccess = (fileChile: any) => {
+    actionFile(fileChile);
+  };
+  const actionFile = async (fileChild: any) => {
+    loading.value = true;
+    try {
+      const formData = new FormData();
+      formData.append('file', fileChild);
+      formData.append('name', props.name);
+      const res = await upload(formData);
+      emit('update:imageUrl', res.fileUrl);
+      emit('changeFileName', res.originalName);
+      // 调用 el-form 内部的校验方法（可自动校验）
+      formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+    } catch (error) {
+      emit('update:imageUrl', '');
+      emit('changeFileName', '');
+    } finally {
+      progress.value = 0;
+      loading.value = false;
+    }
+  };
 
-const handleHttpUpload = async (options: UploadRequestOptions) => {
-  handleHttpUploadOptions.value=options
-  if(props.cropper){
-    fileName.value= options.file.name
-    let reader = new FileReader();
-    reader.readAsDataURL(options.file);
-    let img = new Image();
-    reader.onload = function (e) {
-      img.src = this.result;
-      img.onload = function () {
-        let base = e.target.result;
-        oImg.value= base;
-        event.target.value = "";
-        cropperVisible.value = true;
+  const handleHttpUploadOptions = ref({});
+
+  const handleHttpUpload = async (options: UploadRequestOptions) => {
+    handleHttpUploadOptions.value = options;
+    if (props.cropper) {
+      fileName.value = options.file.name;
+      let reader = new FileReader();
+      reader.readAsDataURL(options.file);
+      let img = new Image();
+      reader.onload = function (e) {
+        img.src = this.result;
+        img.onload = function () {
+          let base = e.target.result;
+          oImg.value = base;
+          event.target.value = '';
+          cropperVisible.value = true;
+        };
       };
-    };
-    return
-  }
-  actionFile(options.file)
-};
+      return;
+    }
+    actionFile(options.file);
+  };
 
-/**
- * @description 删除图片
- * */
-const deleteImg = () => {
-	emit('update:imageUrl', '');
-  emit('changeFileName','')
-};
+  /**
+   * @description 删除图片
+   * */
+  const deleteImg = () => {
+    emit('update:imageUrl', '');
+    emit('changeFileName', '');
+  };
 
-/**
- * @description 编辑图片
- * */
-const editImg = () => {
-	const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
-	dom && dom.dispatchEvent(new MouseEvent('click'));
-};
+  /**
+   * @description 编辑图片
+   * */
+  const editImg = () => {
+    const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
+    dom && dom.dispatchEvent(new MouseEvent('click'));
+  };
 
-/**
- * @description 文件上传之前判断
- * @param rawFile 选择的文件
- * */
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
-	const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
-	const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
-	if (!imgType)
-		ElNotification({
-			title: '温馨提示',
-			message: '上传图片不符合所需的格式！',
-			type: 'warning',
-		});
-	if (!imgSize)
-		setTimeout(() => {
-			ElNotification({
-				title: '温馨提示',
-				message: `上传图片大小不能超过 ${props.fileSize}M！`,
-				type: 'warning',
-			});
-		}, 0);
-	return imgType && imgSize;
-};
+  /**
+   * @description 文件上传之前判断
+   * @param rawFile 选择的文件
+   * */
+  const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+    const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+    if (!imgType)
+      ElNotification({
+        title: '温馨提示',
+        message: '上传图片不符合所需的格式！',
+        type: 'warning',
+      });
+    if (!imgSize)
+      setTimeout(() => {
+        ElNotification({
+          title: '温馨提示',
+          message: `上传图片大小不能超过 ${props.fileSize}M！`,
+          type: 'warning',
+        });
+      }, 0);
+    return imgType && imgSize;
+  };
 
-/**
- * @description 图片上传错误
- * */
-const uploadError = () => {
-	ElNotification({
-		title: '温馨提示',
-		message: '图片上传失败，请您重新上传！',
-		type: 'error',
-	});
-};
+  /**
+   * @description 图片上传错误
+   * */
+  const uploadError = () => {
+    ElNotification({
+      title: '温馨提示',
+      message: '图片上传失败，请您重新上传！',
+      type: 'error',
+    });
+  };
 </script>
 <style scoped lang="scss">
-.is-error {
-	.upload {
-		:deep(.el-upload),
-		:deep(.el-upload-dragger) {
-			border: 1px dashed var(--el-color-danger) !important;
-			&:hover {
-				border-color: var(--el-color-primary) !important;
-			}
-		}
-	}
-}
-:deep(.disabled) {
-	.el-upload,
-	.el-upload-dragger {
-		cursor: not-allowed !important;
-		background: var(--el-disabled-bg-color);
-		border: 1px dashed var(--el-border-color-darker) !important;
-		&:hover {
-			border: 1px dashed var(--el-border-color-darker) !important;
-		}
-	}
-}
-.upload-box {
-	.no-border {
-		:deep(.el-upload) {
-			border: none !important;
-		}
-	}
-	:deep(.upload) {
-		.el-upload {
-			position: relative;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: v-bind(width);
-			height: v-bind(height);
-			overflow: hidden;
-			border: 1px dashed var(--el-border-color-darker);
-			border-radius: v-bind(borderRadius);
-			transition: var(--el-transition-duration-fast);
-			&:hover {
-				border-color: var(--el-color-primary);
-				.upload-handle {
-					opacity: 1;
-				}
-			}
-			.el-upload-dragger {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 100%;
-				height: 100%;
-				padding: 0;
-				overflow: hidden;
-				background-color: transparent;
-				border: 1px dashed var(--el-border-color-darker);
-				border-radius: v-bind(borderRadius);
-				&:hover {
-					border: 1px dashed var(--el-color-primary);
-				}
-			}
-			.el-upload-dragger.is-dragover {
-				background-color: var(--el-color-primary-light-9);
-				border: 2px dashed var(--el-color-primary) !important;
-			}
-			.upload-image {
-				width: 100%;
-				height: 100%;
-				object-fit: contain;
-			}
-			.upload-empty {
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				font-size: 12px;
-				line-height: 30px;
-				color: var(--el-color-info);
-				.el-icon {
-					font-size: 28px;
-					color: var(--el-text-color-secondary);
-				}
-			}
-			.upload-handle {
-				position: absolute;
-				top: 0;
-				right: 0;
-				box-sizing: border-box;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 100%;
-				height: 100%;
-				cursor: pointer;
-				background: rgb(0 0 0 / 60%);
-				opacity: 0;
-				transition: var(--el-transition-duration-fast);
-				.handle-icon {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					padding: 0 6%;
-					color: aliceblue;
-					.el-icon {
-						margin-bottom: 40%;
-						font-size: 130%;
-						line-height: 130%;
-					}
-					span {
-						font-size: 85%;
-						line-height: 85%;
-					}
-				}
-			}
-		}
-	}
-	.el-upload__tip {
-		line-height: 18px;
-		text-align: center;
-	}
-}
+  .is-error {
+    .upload {
+      :deep(.el-upload),
+      :deep(.el-upload-dragger) {
+        border: 1px dashed var(--el-color-danger) !important;
+        &:hover {
+          border-color: var(--el-color-primary) !important;
+        }
+      }
+    }
+  }
+  :deep(.disabled) {
+    .el-upload,
+    .el-upload-dragger {
+      cursor: not-allowed !important;
+      background: var(--el-disabled-bg-color);
+      border: 1px dashed var(--el-border-color-darker) !important;
+      &:hover {
+        border: 1px dashed var(--el-border-color-darker) !important;
+      }
+    }
+  }
+  .upload-box {
+    .no-border {
+      :deep(.el-upload) {
+        border: none !important;
+      }
+    }
+    :deep(.upload) {
+      .el-upload {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: v-bind(width);
+        height: v-bind(height);
+        overflow: hidden;
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderRadius);
+        transition: var(--el-transition-duration-fast);
+        &:hover {
+          border-color: var(--el-color-primary);
+          .upload-handle {
+            opacity: 1;
+          }
+        }
+        .el-upload-dragger {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          padding: 0;
+          overflow: hidden;
+          background-color: transparent;
+          border: 1px dashed var(--el-border-color-darker);
+          border-radius: v-bind(borderRadius);
+          &:hover {
+            border: 1px dashed var(--el-color-primary);
+          }
+        }
+        .el-upload-dragger.is-dragover {
+          background-color: var(--el-color-primary-light-9);
+          border: 2px dashed var(--el-color-primary) !important;
+        }
+        .upload-image {
+          width: 90%;
+          height: 90%;
+          object-fit: contain;
+        }
+        .upload-empty {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          line-height: 30px;
+          color: var(--el-color-info);
+          .el-icon {
+            font-size: 28px;
+            color: var(--el-text-color-secondary);
+          }
+        }
+        .upload-handle {
+          position: absolute;
+          top: 0;
+          right: 0;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+          background: rgb(0 0 0 / 60%);
+          opacity: 0;
+          transition: var(--el-transition-duration-fast);
+          .handle-icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 0 6%;
+            color: aliceblue;
+            .el-icon {
+              margin-bottom: 40%;
+              font-size: 130%;
+              line-height: 130%;
+            }
+            span {
+              font-size: 85%;
+              line-height: 85%;
+            }
+          }
+        }
+      }
+    }
+    .el-upload__tip {
+      line-height: 18px;
+      text-align: center;
+    }
+  }
 </style>
diff --git a/src/components/Upload/Images.vue b/src/components/Upload/Images.vue
index 4627a08..0227c9e 100644
--- a/src/components/Upload/Images.vue
+++ b/src/components/Upload/Images.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="upload-box">
     <div v-for="(item, index) in fileList" class="items">
-      <img v-if="item.filePath" :src="item.filePath"
-        class="upload-image" />
+      <img v-if="item.filePath" :src="item.filePath" class="upload-image" />
       <div class="upload-handle" @click.stop>
         <div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled">
           <el-icon :size="props.iconSize">
@@ -21,300 +20,314 @@
         </div>
       </div>
     </div>
-    <el-upload action="#" :id="uuid" class="upload-demo my-upload-images"
-      :class="fileList.length > 0 && !loading ? 'success-file' : ''" :multiple="multiple" ref="uploadRef"
-      :disabled="loading ? true : (self_disabled || fileList.length >= props.limit)" :http-request="handleHttpUpload"
-      :before-upload="beforeUpload" list-type="picture-card" :limit="limit" :file-list="fileList"
-      :show-file-list="false" v-if="!self_disabled" :on-exceed="onExceed" :accept="props.fileType">
+    <el-upload
+      action="#"
+      :id="uuid"
+      class="upload-demo my-upload-images"
+      :class="fileList.length > 0 && !loading ? 'success-file' : ''"
+      :multiple="multiple"
+      ref="uploadRef"
+      :disabled="loading ? true : self_disabled || fileList.length >= props.limit"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      list-type="picture-card"
+      :limit="limit"
+      :file-list="fileList"
+      :show-file-list="false"
+      v-if="!self_disabled"
+      :on-exceed="onExceed"
+      :accept="props.fileType"
+    >
       <el-icon v-if="!loading">
         <Plus />
       </el-icon>
-      <el-progress type="circle" v-else :percentage="progress"></el-progress>
+      <el-progress type="circle" v-else :percentage="progress" />
     </el-upload>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed,ref } from "vue";
-import { ElNotification, UploadFile, UploadInstance } from "element-plus";
-import type { UploadProps, UploadRequestOptions } from "element-plus";
-import { Plus } from '@element-plus/icons-vue'
-import { generateUUID } from "@/utils/auth";
+  import { computed, ref } from 'vue';
+  import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
+  import type { UploadProps, UploadRequestOptions } from 'element-plus';
+  import { Plus } from '@element-plus/icons-vue';
+  import { generateUUID } from '@/utils/auth';
 
-const uploadRef = ref<UploadInstance>();
-import {upload} from '@/api/common'
+  const uploadRef = ref<UploadInstance>();
+  import { upload } from '@/api/common';
 
-// 接受父组件参数
-const props = defineProps({
-  zIndex: {
-    default: -1
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  btnTip: {
-    type: String,
-    default: ''
-  },
-  limit: {
-    type: Number,
-    default: undefined
-  },
-  width: {
-    type: String,
-    default: '150px'
-  },
-  height: {
-    type: String,
-    default: '150px'
-  },
-  borderRadius: {
-    type: String,
-    default: '8px'
-  },
-  fileList: {
-    type: Array,
-    required: true,
-    default: []
-  },
-  disabled: {
-    default: false
-  },
-  fileSize: {
-    default: 200
-  },
-  orderNo: {
-    default: ''
-  },
-  fileType: {
-    default: ""
-  },
-  name: {
-    default: ""
-  }
-});
-// 生成组件唯一id
-const uuid = ref("id-" + generateUUID());
+  // 接受父组件参数
+  const props = defineProps({
+    zIndex: {
+      default: -1,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    btnTip: {
+      type: String,
+      default: '',
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    width: {
+      type: String,
+      default: '150px',
+    },
+    height: {
+      type: String,
+      default: '150px',
+    },
+    borderRadius: {
+      type: String,
+      default: '8px',
+    },
+    fileList: {
+      type: Array,
+      required: true,
+      default: [],
+    },
+    disabled: {
+      default: false,
+    },
+    fileSize: {
+      default: 200,
+    },
+    orderNo: {
+      default: '',
+    },
+    fileType: {
+      default: '',
+    },
+    name: {
+      default: '',
+    },
+  });
+  // 生成组件唯一id
+  const uuid = ref('id-' + generateUUID());
 
-// 判断是否禁用上传和删除
-const self_disabled = computed(() => {
-  return props.disabled;
-});
-let editIndex = ''
+  // 判断是否禁用上传和删除
+  const self_disabled = computed(() => {
+    return props.disabled;
+  });
+  let editIndex = '';
 
-const emit = defineEmits(["upload"]);
-const progress = ref(0)
-const loading = ref(false);
-const handleHttpUpload = async (options: UploadRequestOptions) => {
-  loading.value = true;
-  try {
-    const formData = new FormData()
-    formData.append('file',options.file)
-    formData.append('name',props.name)
-    const res =await upload(formData)
-    if (props.multiple) {
-      let list = JSON.parse(JSON.stringify(props.fileList))
-      if (editIndex !== '') {
-        list.splice(editIndex, 1, {
-          url: res.fileUrl,
-          name: res.originalName,
-          filePath:  res.fileUrl,
-          fileName: res.originalName
-        })
-        editIndex = ''
+  const emit = defineEmits(['upload']);
+  const progress = ref(0);
+  const loading = ref(false);
+  const handleHttpUpload = async (options: UploadRequestOptions) => {
+    loading.value = true;
+    try {
+      const formData = new FormData();
+      formData.append('file', options.file);
+      formData.append('name', props.name);
+      const res = await upload(formData);
+      if (props.multiple) {
+        let list = JSON.parse(JSON.stringify(props.fileList));
+        if (editIndex !== '') {
+          list.splice(editIndex, 1, {
+            url: res.fileUrl,
+            name: res.originalName,
+            filePath: res.fileUrl,
+            fileName: res.originalName,
+          });
+          editIndex = '';
+        } else {
+          list.push({
+            url: res.fileUrl,
+            name: res.originalName,
+            filePath: res.fileUrl,
+            fileName: res.originalName,
+          });
+        }
+        emit('upload', list, props.zIndex);
       } else {
-        list.push({
-          url: res.fileUrl,
-          name: res.originalName,
-          filePath:  res.fileUrl,
-          fileName: res.originalName
-        })
+        emit('upload', res, props.zIndex);
       }
-      emit('upload', list,props.zIndex)
-    } else {
-      emit("upload", res, props.zIndex);
+    } catch (error) {
+      ElNotification({
+        title: '温馨提示',
+        message: '上传文件失败！',
+        type: 'error',
+      });
+      if (props.multiple) {
+        emit('upload', props.fileList, props.zIndex);
+      } else {
+        uploadRef.value!.clearFiles();
+        emit('upload', '', props.zIndex);
+      }
+      options.onError(error as any);
+    } finally {
+      progress.value = 0;
+      loading.value = false;
     }
-  } catch (error) {
-    ElNotification({
-      title: "温馨提示",
-      message: "上传文件失败！",
-      type: "error"
-    });
+  };
+
+  const onPreview = (index: any) => {
+    window.open(props.fileList[index].filePath);
+  };
+
+  const handleEdit = (index: any) => {
+    editIndex = index;
+    const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
+    dom && dom.dispatchEvent(new MouseEvent('click'));
+  };
+  const handleRemove = (index: any) => {
+    editIndex = index;
     if (props.multiple) {
-      emit('upload', props.fileList,props.zIndex)
+      emit(
+        'upload',
+        props.fileList.filter((f, i) => !(editIndex == i)),
+        props.zIndex,
+      );
     } else {
       uploadRef.value!.clearFiles();
-      emit("upload", "", props.zIndex);
+      emit('upload', '', props.zIndex);
     }
-    options.onError(error as any);
-  } finally {
-    progress.value = 0
-    loading.value = false;
-  }
-};
+  };
 
-const onPreview = (index: any) => {
-  window.open(props.fileList[index].filePath)
-}
-
-const handleEdit = (index: any) => {
-  editIndex = index
-  const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
-  dom && dom.dispatchEvent(new MouseEvent('click'));
-}
-const handleRemove = (index: any) => {
-  editIndex = index
-  if (props.multiple) {
-    emit("upload", props.fileList.filter((f, i) => !(editIndex == i)),props.zIndex)
-  } else {
-    uploadRef.value!.clearFiles();
-    emit("upload", "" ,props.zIndex);
-  }
-};
-
-const onExceed = () => {
-  if (props.limit) {
-    ElNotification({
-      title: "温馨提示",
-      message: `最多支持上传${props.limit}张`,
-      type: "warning"
-    });
-  }
-};
-
-
-/**
- * @description 文件上传之前判断
- * @param rawFile 选择的文件
- * */
-const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
-  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
-  if (!imgSize) {
-    ElNotification({
-      title: "温馨提示",
-      message: `上传文件大小不能超过 ${props.fileSize}M！`,
-      type: "warning"
-    });
-    return false;
-  }
-  if (props.fileType) {
-    let fileType = props.fileType.replace(/\s/g, "");
-    fileType.split('.').join('|')
-    let fileIndex = rawFile.name.lastIndexOf('.')
-    let substrName = rawFile.name.substr(fileIndex)
-    if (fileType.indexOf(substrName) == -1) {
+  const onExceed = () => {
+    if (props.limit) {
       ElNotification({
-        title: "温馨提示",
-        message: "上传文件不符合所需的格式！",
-        type: "warning"
+        title: '温馨提示',
+        message: `最多支持上传${props.limit}张`,
+        type: 'warning',
+      });
+    }
+  };
+
+  /**
+   * @description 文件上传之前判断
+   * @param rawFile 选择的文件
+   * */
+  const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+    if (!imgSize) {
+      ElNotification({
+        title: '温馨提示',
+        message: `上传文件大小不能超过 ${props.fileSize}M！`,
+        type: 'warning',
       });
       return false;
     }
-  }
-  return true;
-};
-
-
+    if (props.fileType) {
+      let fileType = props.fileType.replace(/\s/g, '');
+      fileType.split('.').join('|');
+      let fileIndex = rawFile.name.lastIndexOf('.');
+      let substrName = rawFile.name.substr(fileIndex);
+      if (fileType.indexOf(substrName) == -1) {
+        ElNotification({
+          title: '温馨提示',
+          message: '上传文件不符合所需的格式！',
+          type: 'warning',
+        });
+        return false;
+      }
+    }
+    return true;
+  };
 </script>
 <style scoped lang="scss">
-.success-file {
-  .el-upload {
+  .success-file {
+    .el-upload {
+      .el-upload-dragger {
+        border-width: 3px;
+        border-color: var(--el-color-success) !important;
+      }
+    }
+  }
+
+  .my-upload-images {
+    .el-upload-dragger {
+      padding: var(--el-upload-dragger-padding-vertical);
+    }
+
+    .el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
+      display: none;
+    }
+
+    .el-icon--close-tip {
+      display: none !important;
+    }
+  }
+
+  .el-form-item.is-error {
     .el-upload-dragger {
       border-width: 3px;
-      border-color: var(--el-color-success) !important;
+      border-color: var(--el-color-error) !important;
     }
   }
-}
 
-.my-upload-images {
-  .el-upload-dragger {
-    padding: var(--el-upload-dragger-padding-vertical);
+  :deep(.el-upload-list__item) {
+    transition: none !important;
   }
 
-  .el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
-    display: none;
-  }
-
-  .el-icon--close-tip {
-    display: none !important;
-  }
-}
-
-.el-form-item.is-error {
-  .el-upload-dragger {
-    border-width: 3px;
-    border-color: var(--el-color-error) !important;
-  }
-}
-
-:deep(.el-upload-list__item){
-  transition: none !important;
-}
-
-.upload-box {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  >div {
-    margin-right: 10px;
-    margin-bottom: 10px;
+  .upload-box {
     position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    > div {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      position: relative;
 
-    &.items {
-      width: v-bind(width);
-      height: v-bind(height);
-      border: 1px dashed var(--el-border-color-darker);
-      border-radius: v-bind(borderRadius);
-    }
+      &.items {
+        width: v-bind(width);
+        height: v-bind(height);
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderRadius);
+      }
 
-    &:hover {
-      .upload-handle {
-        opacity: 1;
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
       }
     }
-  }
 
-  .upload-image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
 
-  .upload-handle {
-    position: absolute;
-    top: 0;
-    right: 0;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    background: rgb(0 0 0 / 60%);
-    opacity: 0;
-    transition: var(--el-transition-duration-fast);
-
-    .handle-icon {
+    .upload-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      box-sizing: border-box;
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 0 6%;
-      color: aliceblue;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: rgb(0 0 0 / 60%);
+      opacity: 0;
+      transition: var(--el-transition-duration-fast);
 
-      .el-icon {
-        margin-bottom: 40%;
-        font-size: 130%;
-        line-height: 130%;
-      }
+      .handle-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6%;
+        color: aliceblue;
 
-      span {
-        font-size: 85%;
-        line-height: 85%;
+        .el-icon {
+          margin-bottom: 40%;
+          font-size: 130%;
+          line-height: 130%;
+        }
+
+        span {
+          font-size: 85%;
+          line-height: 85%;
+        }
       }
     }
   }
-}
 </style>
diff --git a/src/components/Upload/cropper.vue b/src/components/Upload/cropper.vue
index 9bc2581..512acc6 100644
--- a/src/components/Upload/cropper.vue
+++ b/src/components/Upload/cropper.vue
@@ -1,35 +1,35 @@
 <template>
   <el-dialog
-      v-model="props.visible"
-      title="图片裁剪"
-      :append-to-body="true"
-      class="cropper_model_dlg"
-      width="500"
-      :close-on-click-modal="false"
-      :before-close="dialogClose"
+    v-model="props.visible"
+    title="图片裁剪"
+    :append-to-body="true"
+    class="cropper_model_dlg"
+    width="500"
+    :close-on-click-modal="false"
+    :before-close="dialogClose"
   >
     <div class="cropper_content">
-      <div class="cropper" style="text-align: center;">
+      <div class="cropper" style="text-align: center">
         <vueCropper
-            ref="cropperRef"
-            :img="options.img"
-            :outputSize="options.outputSize"
-            :outputType="options.outputType"
-            :info="options.info"
-            :canScale="options.canScale"
-            :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
-            :fixed="options.fixed"
-            :maximgSize="options.maximgSize"
-            :fixedBox="options.fixedBox"
-            :enlarge="options.enlarge"
-            :fixedNumber="options.fixedNumber"
-        ></vueCropper>
+          ref="cropperRef"
+          :img="options.img"
+          :outputSize="options.outputSize"
+          :outputType="options.outputType"
+          :info="options.info"
+          :canScale="options.canScale"
+          :autoCrop="options.autoCrop"
+          :autoCropWidth="options.autoCropWidth"
+          :autoCropHeight="options.autoCropHeight"
+          :fixed="options.fixed"
+          :maximgSize="options.maximgSize"
+          :fixedBox="options.fixedBox"
+          :enlarge="options.enlarge"
+          :fixedNumber="options.fixedNumber"
+        />
       </div>
       <div class="cropper_btns">
-        <el-button @click="rotateLeft" icon="RefreshLeft" size="mini" title="左旋转"></el-button>
-        <el-button @click="rotateRight" icon="RefreshRight" size="mini" title="右旋转"></el-button>
+        <el-button @click="rotateLeft" icon="RefreshLeft" size="mini" title="左旋转" />
+        <el-button @click="rotateRight" icon="RefreshRight" size="mini" title="右旋转" />
         <el-button @click="changeScale(1)" size="mini" title="放大">+</el-button>
         <el-button @click="changeScale(-1)" size="mini" title="缩小">-</el-button>
       </div>
@@ -44,154 +44,154 @@
 </template>
 
 <script lang="ts" setup>
-import VueCropper from "vue-cropper/src/vue-cropper.vue";
-import { ref, reactive} from 'vue';
+  import VueCropper from 'vue-cropper/src/vue-cropper.vue';
+  import { ref, reactive } from 'vue';
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    required: true,
-    default: false
-  },
-  cropperSize: {
-    type: Object,
-    default() {
-      return null;
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    cropperSize: {
+      type: Object,
+      default() {
+        return null;
+      },
+    },
+    oImg: {
+      type: String,
+      default: '',
+    },
+    fileName: {
+      type: String,
+      default: '',
+    },
+    folder: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const dialogClose = () => {
+    emit('update:visible', false);
+  };
+  const options = reactive({
+    img: props.oImg, // 裁剪图片的地址
+    outputSize: 1, // 裁剪生成图片的质量
+    outputType: 'png', // 裁剪生成图片的格式
+    info: true, // 裁剪框的大小信息
+    canScale: true, // 图片是否允许滚动缩放
+    autoCrop: true, // 是否默认生成截图框
+    autoCropWidth: props.cropperSize ? props.cropperSize.width : 200, // 默认生成截图框宽度
+    autoCropHeight: props.cropperSize ? props.cropperSize.height : 200, // 默认生成截图框高度
+    fixed: false, // 是否开启截图框宽高固定比例
+    fixedNumber: [1, 1], // 截图框的宽高比例
+    full: true, // 是否输出原图比例的截图
+    fixedBox: true, // 固定截图框大小 不允许改变
+    canMove: true, // 上传图片是否可以移动
+    canMoveBox: true, // 截图框能否拖动
+    original: true, // 上传图片按照原始比例渲染
+    centerBox: false, // 截图框是否被限制在图片里面
+    high: false, // 是否按照设备的dpr输出等比例图片
+    infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
+    maximgSize: 100, // 限制图片最大宽度和高度
+    enlarge: 1, // 图片根据截图框输出比例倍数
+    mode: 'contain', // 图片默认渲染方式(contain, cover, 100px, 100% auto)
+  });
+  const cropperRef = ref();
+
+  const addImgLoading = ref(false);
+
+  // 左旋转
+  const rotateLeft = () => {
+    cropperRef.value.rotateLeft();
+  };
+  // 右旋转
+  const rotateRight = () => {
+    cropperRef.value.rotateRight();
+  };
+  // 放大缩小
+  const changeScale = (num: any) => {
+    num = num || 1;
+    cropperRef.value.changeScale(num);
+  };
+
+  const emit = defineEmits(['success', 'update:visible']);
+
+  // base64转图片文件
+  const dataURLtoFile = (dataurl: any, filename: any) => {
+    let arr = dataurl.split(',');
+    let mime = arr[0].match(/:(.*?);/)[1];
+    let bstr = atob(arr[1]);
+    let len = bstr.length;
+    let u8arr = new Uint8Array(len);
+    while (len--) {
+      u8arr[len] = bstr.charCodeAt(len);
     }
-  },
-  oImg: {
-    type: String,
-    default: ""
-  },
-  fileName: {
-    type: String,
-    default: ""
-  },
-  folder: {
-    type: String,
-    default: ""
-  }
-});
+    return new File([u8arr], filename, { type: mime });
+  };
 
-const dialogClose = () => {
-  emit("update:visible", false);
-};
-const options = reactive({
-  img: props.oImg, // 裁剪图片的地址
-  outputSize: 1, // 裁剪生成图片的质量
-  outputType: "png", // 裁剪生成图片的格式
-  info: true, // 裁剪框的大小信息
-  canScale: true, // 图片是否允许滚动缩放
-  autoCrop: true, // 是否默认生成截图框
-  autoCropWidth: props.cropperSize ? props.cropperSize.width : 200, // 默认生成截图框宽度
-  autoCropHeight: props.cropperSize ? props.cropperSize.height : 200, // 默认生成截图框高度
-  fixed: false, // 是否开启截图框宽高固定比例
-  fixedNumber: [1, 1], // 截图框的宽高比例
-  full: true, // 是否输出原图比例的截图
-  fixedBox: true, // 固定截图框大小 不允许改变
-  canMove: true, // 上传图片是否可以移动
-  canMoveBox: true, // 截图框能否拖动
-  original: true, // 上传图片按照原始比例渲染
-  centerBox: false, // 截图框是否被限制在图片里面
-  high: false, // 是否按照设备的dpr输出等比例图片
-  infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
-  maximgSize: 100, // 限制图片最大宽度和高度
-  enlarge: 1, // 图片根据截图框输出比例倍数
-  mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
-});
-const cropperRef = ref();
+  const submit = () => {
+    cropperRef.value.getCropData((fileData) => {
+      let file = dataURLtoFile(fileData, props.fileName);
+      emit('update:visible', false);
+      emit('success', file);
+    });
+  };
 
-const addImgLoading = ref(false);
-
-// 左旋转
-const rotateLeft = () => {
-  cropperRef.value.rotateLeft();
-};
-// 右旋转
-const rotateRight = () => {
-  cropperRef.value.rotateRight();
-};
-// 放大缩小
-const changeScale = (num: any) => {
-  num = num || 1;
-  cropperRef.value.changeScale(num);
-};
-
-const emit = defineEmits(["success", "update:visible"]);
-
-// base64转图片文件
-const dataURLtoFile=(dataurl:any, filename:any)=> {
-  let arr = dataurl.split(",");
-  let mime = arr[0].match(/:(.*?);/)[1];
-  let bstr = atob(arr[1]);
-  let len = bstr.length;
-  let u8arr = new Uint8Array(len);
-  while (len--) {
-    u8arr[len] = bstr.charCodeAt(len);
-  }
-  return new File([u8arr], filename, {type: mime});
-}
-
-const submit=()=>{
-  cropperRef.value.getCropData(fileData => {
-    let file = dataURLtoFile(fileData, props.fileName);
-    emit("update:visible", false);
-    emit('success',file)
-  })
-}
-
-// 暴露变量
-defineExpose({});
+  // 暴露变量
+  defineExpose({});
 </script>
 
 <style lang="scss">
-.cropper_model_dlg {
-  .el-dialog__body {
-    padding: 0px 20px 60px !important
-  }
+  .cropper_model_dlg {
+    .el-dialog__body {
+      padding: 0px 20px 60px !important;
+    }
 
-  .cropper_content {
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+    .cropper_content {
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
 
-  .add-img {
-    opacity: 0;
-    position: absolute;
-    width: 80px;
-    height: 28px;
-    top: 0px;
-    left: 0px;
-  }
+    .add-img {
+      opacity: 0;
+      position: absolute;
+      width: 80px;
+      height: 28px;
+      top: 0px;
+      left: 0px;
+    }
 
-  .cropper {
-    width: 400px;
-    height: 400px;
-    background: yellow;
-  }
+    .cropper {
+      width: 400px;
+      height: 400px;
+      background: yellow;
+    }
 
-  .cropper500 {
-    width: 600px;
-    height: 600px;
-    background: yellow;
-    border: 1px solid #e3e3e3;
-  }
+    .cropper500 {
+      width: 600px;
+      height: 600px;
+      background: yellow;
+      border: 1px solid #e3e3e3;
+    }
 
-  .cropper_right {
-    width: 520px;
-    text-align: center;
-  }
+    .cropper_right {
+      width: 520px;
+      text-align: center;
+    }
 
-  .cropper_preview {
-    margin: 0 auto;
-    display: inline-block;
-    border: 1px solid #ddd;
-  }
+    .cropper_preview {
+      margin: 0 auto;
+      display: inline-block;
+      border: 1px solid #ddd;
+    }
 
-  .cropper_btns {
-    margin-top: 20px;
+    .cropper_btns {
+      margin-top: 20px;
+    }
   }
-}
 </style>
diff --git a/src/components/Upload/file.vue b/src/components/Upload/file.vue
index ab38d26..3d8b577 100644
--- a/src/components/Upload/file.vue
+++ b/src/components/Upload/file.vue
@@ -1,28 +1,28 @@
 <template>
   <el-upload
-      action="#"
-      :id="uuid"
-      class="upload-demo my-upload-file"
-      :class="fileList.length>0&&!loading?'success-file':''"
-      :multiple="multiple"
-      ref="uploadRef"
-      :disabled="loading?true:self_disabled"
-      :http-request="handleHttpUpload"
-      :file-list="fileList"
-      :on-preview="onPreview"
-      :on-remove="handleRemove"
-      :before-upload="beforeUpload"
-      :show-file-list="showFileList"
-      :drag="isBtn?false:true"
-      :limit="limit"
+    action="#"
+    :id="uuid"
+    class="upload-demo my-upload-file"
+    :class="fileList.length > 0 && !loading ? 'success-file' : ''"
+    :multiple="multiple"
+    ref="uploadRef"
+    :disabled="loading ? true : self_disabled"
+    :http-request="handleHttpUpload"
+    :file-list="fileList"
+    :on-preview="onPreview"
+    :on-remove="handleRemove"
+    :before-upload="beforeUpload"
+    :show-file-list="showFileList"
+    :drag="isBtn ? false : true"
+    :limit="limit"
   >
     <template v-if="isBtn">
       <el-tooltip
-          v-if="isBtn&&btnTip"
-          class="box-item"
-          effect="dark"
-          :content="btnTip"
-          placement="top"
+        v-if="isBtn && btnTip"
+        class="box-item"
+        effect="dark"
+        :content="btnTip"
+        placement="top"
       >
         <el-button icon="Upload" type="primary">点击上传</el-button>
       </el-tooltip>
@@ -30,197 +30,201 @@
     </template>
     <template v-else>
       <el-icon class="el-icon--upload">
-        <Finished style="color: var(--el-color-success)" v-if="fileList.length>0&&!loading"/>
-        <upload-filled v-else/>
+        <Finished style="color: var(--el-color-success)" v-if="fileList.length > 0 && !loading" />
+        <upload-filled v-else />
       </el-icon>
-      <div v-if="!self_disabled" class="el-upload__text">{{loading?'上传中':(fileList.length>0?'上传成功':'点击或将文件拖拽到这里上传')}}</div>
+      <div v-if="!self_disabled" class="el-upload__text">{{
+        loading ? '上传中' : fileList.length > 0 ? '上传成功' : '点击或将文件拖拽到这里上传'
+      }}</div>
     </template>
     <template #tip>
       <template v-if="!isBtn">
         <div v-if="props.fileType" class="el-upload__tip">支持扩展名：{{ props.fileType }}</div>
-        <div v-if="props.multiple && props.limit" class="el-upload__tip">最多上传{{props.limit}}个文件</div>
+        <div v-if="props.multiple && props.limit" class="el-upload__tip"
+          >最多上传{{ props.limit }}个文件</div
+        >
       </template>
     </template>
   </el-upload>
 </template>
 
 <script setup lang="ts">
-import { computed,ref} from "vue";
-import {ElNotification, UploadFile, UploadInstance} from "element-plus";
-import type {UploadProps, UploadRequestOptions} from "element-plus";
-import {generateUUID} from "@/utils/auth";
+  import { computed, ref } from 'vue';
+  import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
+  import type { UploadProps, UploadRequestOptions } from 'element-plus';
+  import { generateUUID } from '@/utils/auth';
 
-const uploadRef = ref<UploadInstance>();
-import {upload} from '@/api/common'
+  const uploadRef = ref<UploadInstance>();
+  import { upload } from '@/api/common';
 
-// 接受父组件参数
-const props = defineProps({
-  zIndex: {
-    default: -1
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  isBtn: {
-    type: Boolean,
-    default: false
-  },
-  showFileList: {
-    type: Boolean,
-    default: true
-  },
-  btnTip: {
-    type: String,
-    default: ''
-  },
-  limit: {
-    type: Number,
-    default: undefined
-  },
-  fileList: {
-    type: Array,
-    required: true,
-    default: []
-  },
-  disabled: {
-    default: false
-  },
-  fileSize: {
-    default: 200
-  },
-  orderNo: {
-    default: ''
-  },
-  fileType: {
-    default: ""
-  },
-  name: {
-    default: ""
-  }
-});
+  // 接受父组件参数
+  const props = defineProps({
+    zIndex: {
+      default: -1,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    isBtn: {
+      type: Boolean,
+      default: false,
+    },
+    showFileList: {
+      type: Boolean,
+      default: true,
+    },
+    btnTip: {
+      type: String,
+      default: '',
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    fileList: {
+      type: Array,
+      required: true,
+      default: [],
+    },
+    disabled: {
+      default: false,
+    },
+    fileSize: {
+      default: 200,
+    },
+    orderNo: {
+      default: '',
+    },
+    fileType: {
+      default: '',
+    },
+    name: {
+      default: '',
+    },
+  });
 
-// 生成组件唯一id
-const uuid = ref("id-" + generateUUID());
+  // 生成组件唯一id
+  const uuid = ref('id-' + generateUUID());
 
-// 判断是否禁用上传和删除
-const self_disabled = computed(() => {
-  return props.disabled;
-});
+  // 判断是否禁用上传和删除
+  const self_disabled = computed(() => {
+    return props.disabled;
+  });
 
+  const emit = defineEmits(['upload']);
 
-const emit = defineEmits(["upload"]);
-
-const loading = ref(false);
-const handleHttpUpload = async (options: UploadRequestOptions) => {
-
-  loading.value = true;
-  try {
-    const formData = new FormData()
-    formData.append('file',options.file)
-    formData.append('name',props.name)
-    const res =await upload(formData)
-    if(props.multiple){
-      let list=JSON.parse(JSON.stringify(props.fileList))
-      list.push({
-        url: res.fileUrl,
-        name: res.originalName,
-        filePath: res.fileUrl,
-        fileName:  res.originalName,
-      })
-      emit('upload', list,props.zIndex)
-    }else{
-      emit("upload", res.fileUrl,res.originalName,props.zIndex);
-    }
-  } catch (error) {
-    ElNotification({
-      title: "温馨提示",
-      message: "上传文件失败！",
-      type: "error"
-    });
-    if(props.multiple){
-      emit('upload', props.fileList,props.zIndex)
-    }else{
-      uploadRef.value!.clearFiles();
-      emit("upload", "", "",props.zIndex);
-    }
-    options.onError(error as any);
-  } finally {
-    loading.value = false;
-  }
-};
-
-const onPreview=(uploadFile: UploadFile)=> {
-  window.open( uploadFile?.url)
-}
-
-const handleRemove: UploadProps["onRemove"] = (file:any) => {
-  if(props.multiple){
-    emit("upload",props.fileList.filter((f) => !(f === file.url)),props.zIndex)
-  }else{
-    uploadRef.value!.clearFiles();
-    emit("upload", "", "", props.zIndex);
-  }
-};
-
-/**
- * @description 文件上传之前判断
- * @param rawFile 选择的文件
- * */
-const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
-  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
-  if (!imgSize) {
-    ElNotification({
-      title: "温馨提示",
-      message: `上传文件大小不能超过 ${props.fileSize}M！`,
-      type: "warning"
-    });
-    return false;
-  }
-  if( props.fileType){
-    let fileType = props.fileType.replace(/\s/g, "");
-    fileType.split('.').join('|')
-    let fileIndex = rawFile.name.lastIndexOf('.')
-    let substrName = rawFile.name.substr(fileIndex)
-    if (fileType.indexOf(substrName)==-1) {
-        ElNotification({
-          title: "温馨提示",
-          message: "上传文件不符合所需的格式！",
-          type: "warning"
+  const loading = ref(false);
+  const handleHttpUpload = async (options: UploadRequestOptions) => {
+    loading.value = true;
+    try {
+      const formData = new FormData();
+      formData.append('file', options.file);
+      formData.append('name', props.name);
+      const res = await upload(formData);
+      if (props.multiple) {
+        let list = JSON.parse(JSON.stringify(props.fileList));
+        list.push({
+          url: res.fileUrl,
+          name: res.originalName,
+          filePath: res.fileUrl,
+          fileName: res.originalName,
         });
+        emit('upload', list, props.zIndex);
+      } else {
+        emit('upload', res.fileUrl, res.originalName, props.zIndex);
+      }
+    } catch (error) {
+      ElNotification({
+        title: '温馨提示',
+        message: '上传文件失败！',
+        type: 'error',
+      });
+      if (props.multiple) {
+        emit('upload', props.fileList, props.zIndex);
+      } else {
+        uploadRef.value!.clearFiles();
+        emit('upload', '', '', props.zIndex);
+      }
+      options.onError(error as any);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const onPreview = (uploadFile: UploadFile) => {
+    window.open(uploadFile?.url);
+  };
+
+  const handleRemove: UploadProps['onRemove'] = (file: any) => {
+    if (props.multiple) {
+      emit(
+        'upload',
+        props.fileList.filter((f) => !(f === file.url)),
+        props.zIndex,
+      );
+    } else {
+      uploadRef.value!.clearFiles();
+      emit('upload', '', '', props.zIndex);
+    }
+  };
+
+  /**
+   * @description 文件上传之前判断
+   * @param rawFile 选择的文件
+   * */
+  const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+    if (!imgSize) {
+      ElNotification({
+        title: '温馨提示',
+        message: `上传文件大小不能超过 ${props.fileSize}M！`,
+        type: 'warning',
+      });
       return false;
     }
-  }
-  return true;
-};
-
-
+    if (props.fileType) {
+      let fileType = props.fileType.replace(/\s/g, '');
+      fileType.split('.').join('|');
+      let fileIndex = rawFile.name.lastIndexOf('.');
+      let substrName = rawFile.name.substr(fileIndex);
+      if (fileType.indexOf(substrName) == -1) {
+        ElNotification({
+          title: '温馨提示',
+          message: '上传文件不符合所需的格式！',
+          type: 'warning',
+        });
+        return false;
+      }
+    }
+    return true;
+  };
 </script>
 <style lang="scss">
-.success-file {
-  .el-upload {
-    .el-upload-dragger {
-      border-width: 3px;
-      border-color: var(--el-color-success) !important;
+  .success-file {
+    .el-upload {
+      .el-upload-dragger {
+        border-width: 3px;
+        border-color: var(--el-color-success) !important;
+      }
     }
   }
-}
 
-.my-upload-file{
-  .el-upload-dragger{
-    padding: var(--el-upload-dragger-padding-vertical);
+  .my-upload-file {
+    .el-upload-dragger {
+      padding: var(--el-upload-dragger-padding-vertical);
+    }
+    .el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
+      display: none;
+    }
+    .el-icon--close-tip {
+      display: none !important;
+    }
   }
-  .el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to{
-    display: none;
+  .el-form-item.is-error {
+    .el-upload-dragger {
+      border-width: 3px;
+      border-color: var(--el-color-error) !important;
+    }
   }
-  .el-icon--close-tip{
-    display: none!important;
-  }
-}
-.el-form-item.is-error{
-  .el-upload-dragger {
-    border-width: 3px;
-    border-color: var(--el-color-error) !important;
-  }
-}
 </style>
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
index 65d48cf..11f3099 100644
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -70,7 +70,7 @@
 
   const showModal = ref(false);
   const previewUrl = ref('');
-  const fileList =  computed(() => {
+  const fileList = computed(() => {
     return props.list;
   });