Merge branch 'youlaitech:master' into master

Author: Ninjaxsh

src/components/Upload/MultiUpload.vue src/components/Upload/ImageUpload.vue

@@ -3,20 +3,43 @@
   <el-upload
     v-model:file-list="fileList"
     list-type="picture-card"
+    :class="
+      fileList.length >= props.limit || !props.showUploadBtn ? 'hide' : 'show'
+    "
     :before-upload="handleBeforeUpload"
     :http-request="handleUpload"
     :on-remove="handleRemove"
-    :on-preview="previewImg"
+    :accept="props.accept"
     :limit="props.limit"
   >
     <i-ep-plus />
+    <template #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="previewImg(file)">
+            <el-icon><zoom-in /></el-icon>
+          </span>
+          <span
+            v-if="props.showDelBtn"
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <el-icon><Delete /></el-icon>
+          </span>
+        </span>
+      </div>
+    </template>
   </el-upload>
 
-  <el-dialog v-model="dialogVisible">
-    <img w-full :src="previewImgUrl" alt="Preview Image" />
-  </el-dialog>
+  <el-image-viewer
+    v-if="viewVisible"
+    :zoom-rate="1.2"
+    @close="closePreview"
+    :initialIndex="initialIndex"
+    :url-list="viewFileList"
+  />
 </template>
-
 <script setup lang="ts">
 import {
   UploadRawFile,
@@ -44,12 +67,42 @@ const props = defineProps({
     type: Number,
     default: 10,
   },
+  /**
+   * 是否显示删除按钮
+   */
+  showDelBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 是否显示上传按钮
+   */
+  showUploadBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 单张图片最大大小
+   */
+  uploadMaxSize: {
+    type: Number,
+    default: 2 * 1024 * 1024,
+  },
+  /**
+   * 上传文件类型
+   */
+  accept: {
+    type: String,
+    default: "image/*",
+  },
 });
 
-const previewImgUrl = ref("");
-const dialogVisible = ref(false);
+const viewVisible = ref(false);
+const initialIndex = ref(0);
 
 const fileList = ref([] as UploadUserFile[]);
+const viewFileList = ref([] as string[]);
+
 watch(
   () => props.modelValue,
   (newVal: string[]) => {
@@ -79,7 +132,7 @@ watch(
 /**
  * 自定义图片上传
  *
- * @param params
+ * @param options
  */
 async function handleUpload(options: UploadRequestOptions): Promise<any> {
   // 上传API调用
@@ -89,12 +142,10 @@ async function handleUpload(options: UploadRequestOptions): Promise<any> {
   const fileIndex = fileList.value.findIndex(
     (file) => file.uid == (options.file as any).uid
   );
-
   fileList.value.splice(fileIndex, 1, {
     name: data.name,
     url: data.url,
   } as UploadUserFile);
-
   emit(
     "update:modelValue",
     fileList.value.map((file) => file.url)
@@ -122,8 +173,10 @@ function handleRemove(removeFile: UploadFile) {
  * 限制用户上传文件的格式和大小
  */
 function handleBeforeUpload(file: UploadRawFile) {
-  if (file.size > 2 * 1048 * 1048) {
-    ElMessage.warning("上传图片不能大于2M");
+  if (file.size > props.uploadMaxSize) {
+    ElMessage.warning(
+      "上传图片不能大于" + props.uploadMaxSize / 1024 / 1024 + "M"
+    );
     return false;
   }
   return true;
@@ -132,8 +185,31 @@ function handleBeforeUpload(file: UploadRawFile) {
 /**
  * 预览图片
  */
-const previewImg: UploadProps["onPreview"] = (uploadFile) => {
-  previewImgUrl.value = uploadFile.url!;
-  dialogVisible.value = true;
+const previewImg: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
+  viewFileList.value = fileList.value.map((file) => file.url!);
+  initialIndex.value = fileList.value.findIndex(
+    (file) => file.url === uploadFile.url
+  );
+  viewVisible.value = true;
+};
+
+/**
+ * 关闭预览
+ */
+const closePreview = () => {
+  viewVisible.value = false;
 };
 </script>
+<style lang="scss" scoped>
+.hide {
+  :deep(.el-upload--picture-card) {
+    display: none;
+  }
+}
+
+.show {
+  :deep(.el-upload--picture-card) {
+    display: flex;
+  }
+}
+</style>

src/views/demo/upload.vue

@@ -1,19 +1,53 @@
 <!-- 文件上传组件(单图+多图)示例 -->
 <script setup lang="ts">
-import SingleUpload from "@/components/Upload/SingleUpload.vue";
-import MultiUpload from "@/components/Upload/MultiUpload.vue";
-
-const singlePicUrl = ref(
-  "https://oss.youlai.tech/youlai-boot/2023/05/20/2b6d8b49fa1047348a0a41cef5aaf69e.gif"
-);
+import ImageUpload from "@/components/Upload/ImageUpload.vue";
+const size = ref("");
 // 这里放外链图片，防止被删
-const multiPicUrls = ref([
+const picUrls = ref([
   "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
   "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
   "https://s2.loli.net/2023/05/24/ZPiGbcpR91WqInB.jpg",
   "https://s2.loli.net/2023/05/24/e1bcnEq3MFdmlNL.jpg",
   "https://s2.loli.net/2023/05/24/wZTSPj1yDQNcuhU.jpg",
 ]);
+const tableData = [
+  {
+    argsName: "v-model",
+    type: "Arrays",
+    default: "[]",
+    desc: "已经上传的图片数组",
+  },
+  {
+    argsName: "limit",
+    type: "Number",
+    default: 10,
+    desc: "上传最大的图片数量",
+  },
+  {
+    argsName: "showDelBtn",
+    type: "Boolean",
+    default: true,
+    desc: "是否显示删除按钮",
+  },
+  {
+    argsName: "showUploadBtn",
+    type: "Boolean",
+    default: true,
+    desc: "是否显示上传按钮",
+  },
+  {
+    argsName: "accept",
+    type: "String",
+    default: "image/*",
+    desc: "上传文件类型",
+  },
+  {
+    argsName: "uploadMaxSize",
+    type: "Number",
+    default: "2 * 1024 * 1024",
+    desc: "单个图片上传大小限制(单位byte)",
+  },
+];
 </script>
 <template>
   <div class="app-container">
@@ -22,15 +56,23 @@ const multiPicUrls = ref([
       type="primary"
       target="_blank"
       class="mb-10"
-      >示例源码 请点击>>>></el-link
     >
+      示例源码 请点击>>>>
+    </el-link>
 
     <el-form>
-      <el-form-item label="单图上传">
-        <single-upload v-model="singlePicUrl" />
+      <el-form-item label="图片上传">
+        <image-upload v-model="picUrls" />
       </el-form-item>
-      <el-form-item label="多图上传">
-        <multi-upload v-model="multiPicUrls" />
+    </el-form>
+    <el-form>
+      <el-form-item label="参数说明">
+        <el-table :data="tableData" border>
+          <el-table-column prop="argsName" label="参数名称" width="300" />
+          <el-table-column prop="type" label="参数类型" width="200" />
+          <el-table-column prop="default" label="默认值" width="200" />
+          <el-table-column prop="desc" label="描述" width="300" />
+        </el-table>
       </el-form-item>
     </el-form>
   </div>