perf: 优化上传组件

2023-09-25 10:39:28 +08:00
parent 0bc2be52ef
commit 3525d7567e
4 changed files with 232 additions and 252 deletions
--- a/src/components/UploadModal/index.vue
+++ b/src/components/UploadModal/index.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue/lib';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+const emit = defineEmits(['upload', 'close', 'update:visible']);
+const props = defineProps({
+  /**窗口标题 */
+  title: {
+    type: String,
+    default: '标题',
+  },
+  /**是否上传中 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**是否弹出显示，必传 */
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  /**允许上传的文件拓展类型，默认任意，可指定['.xls', '.xlsx'] */
+  ext: {
+    type: Array<string>,
+    default: [],
+  },
+  /**上传文件大小（单位MB），默认不限制，可指定10 */
+  size: {
+    type: Number,
+    default: 0,
+  },
+});
+
+/**弹框关闭事件 */
+function fnModalClose() {
+  if(props.loading) return
+  emit('close');
+}
+
+/**上传前检查或转换压缩 */
+function fnBeforeUpload(file: FileType) {
+  if (props.loading) return false;
+    // 检查文件大小
+    if (props.size > 0) {
+    const fileSize = file.size;
+    const isLtM = fileSize / 1024 / 1024 < props.size;
+    if (!isLtM) {
+      message.error(`上传文件大小必须小于 ${props.size}MB`, 3);
+      return false;
+    }
+  }
+  // 检查后缀
+  if (props.ext.length > 0) {
+    const fileName = file.name;
+    const isAllowType = props.ext.some(v => fileName.endsWith(v));
+    if (!isAllowType) {
+      message.error(`只支持上传文件格式 ${props.ext.join('、')}`, 3);
+      return false;
+    }
+  }
+  return true;
+}
+
+/**上传请求发出 */
+function fnUpload(up: UploadRequestOption) {
+  emit('upload', up.file)
+}
+</script>
+
+<template>
+  <a-modal
+    width="500px"
+    :title="props.title"
+    :visible="props.visible"
+    :keyboard="false"
+    :mask-closable="false"
+    :confirm-loading="props.loading"
+    :footer="null"
+    @cancel="fnModalClose"
+  >
+    <a-space :size="8" direction="vertical" style="width: 100%">
+      <a-upload-dragger
+        :disabled="props.loading"
+        :accept="props.ext.join(',')"
+        name="file"
+        :max-count="1"
+        :show-upload-list="false"
+        :before-upload="fnBeforeUpload"
+        :custom-request="fnUpload"
+      >
+        <p class="ant-upload-drag-icon">
+          <inbox-outlined></inbox-outlined>
+        </p>
+        <p class="ant-upload-text">点击选择或将文件拖入边框区域进行上传</p>
+        <p class="ant-upload-hint">
+          <div v-if="props.size > 0">
+            允许上传文件大小 {{ props.size }} MB
+          </div>
+          <div v-if="props.ext.length > 0">
+            允许导入
+            {{ props.ext.join('、') }}
+            格式文件
+          </div>
+        </p>
+      </a-upload-dragger>
+      <slot></slot>
+    </a-space>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>