feat: ✨ 新增文件上传组件

新增文件上传组件

src/api/file.ts

@@ -1,6 +1,11 @@
 import request from "@/utils/request";
 
 class FileAPI {
+  /**
+   * 文件上传地址
+   */
+  static uploadUrl = import.meta.env.VITE_APP_BASE_API + "/api/v1/files";
+
   /**
    * 上传文件
    *
@@ -31,6 +36,27 @@ class FileAPI {
       params: { filePath: filePath },
     });
   }
+
+  /**
+   * 下载文件
+   * @param url
+   * @param fileName
+   */
+  static downloadFile(url: string, fileName?: string) {
+    return request({
+      url: url,
+      method: "get",
+      responseType: "blob",
+    }).then((res) => {
+      const blob = new Blob([res.data]);
+      const a = document.createElement("a");
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName || "下载文件";
+      a.click();
+      window.URL.revokeObjectURL(url);
+    });
+  }
 }
 
 export default FileAPI;

src/components/Upload/FileUpload.vue

@@ -0,0 +1,329 @@
+<!-- 文件上传组件 -->
+<template>
+  <div>
+    <el-upload
+      v-model:file-list="fileList"
+      :class="props.showUploadBtn ? 'show-upload-btn' : 'hide-upload-btn'"
+      :style="props.style"
+      multiple
+      :headers="props.headers"
+      :data="props.data"
+      :name="props.name"
+      :before-upload="handleBeforeUpload"
+      :on-remove="handleRemove"
+      :on-progress="handleProgress"
+      :on-success="handleSuccessFile"
+      :on-error="handleError"
+      :action="props.action"
+      :accept="props.accept"
+      :limit="props.limit"
+    >
+      <el-button
+        type="primary"
+        v-if="props.showUploadBtn"
+        :disabled="fileList.length >= props.limit"
+      >
+        {{ props.uploadBtnText }}
+      </el-button>
+      <template #tip v-if="props.showTip">
+        <div class="el-upload__tip">
+          {{ props.tip }}
+        </div>
+      </template>
+      <template #file="{ file }">
+        <div class="el-upload-list__item-info">
+          <a class="el-upload-list__item-name" @click="downloadFile(file)">
+            <el-icon><Document /></el-icon>
+            <span class="el-upload-list__item-file-name">{{ file.name }}</span>
+            <span
+              class="el-icon--close"
+              v-if="props.showDelBtn"
+              @click.stop="handleRemove(file)"
+            >
+              <el-icon><Close /></el-icon>
+            </span>
+          </a>
+        </div>
+      </template>
+    </el-upload>
+    <el-progress
+      :style="{
+        display: showUploadPercent ? 'inline-flex' : 'none',
+        width: '100%',
+      }"
+      :percentage="uploadPercent"
+      :color="customColorMethod"
+      v-if="showUploadPercent"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  UploadRawFile,
+  UploadUserFile,
+  UploadFile,
+  UploadProgressEvent,
+} from "element-plus";
+import { TOKEN_KEY } from "@/enums/CacheEnum";
+import FileAPI from "@/api/file";
+import { ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { ResultEnum } from "@/enums/ResultEnum";
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  /**
+   * 文件集合
+   */
+  modelValue: {
+    type: Array<UploadUserFile>,
+    default: () => [],
+  },
+  /**
+   * 上传地址
+   */
+  action: {
+    type: String,
+    default: FileAPI.uploadUrl,
+  },
+  /**
+   * 文件上传数量限制
+   */
+  limit: {
+    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: "*",
+  },
+  /**
+   * 上传按钮文本
+   */
+  uploadBtnText: {
+    type: String,
+    default: "上传文件",
+  },
+  /**
+   * 是否展示提示信息
+   */
+  showTip: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 提示信息内容
+   */
+  tip: {
+    type: String,
+    default: "",
+  },
+  /**
+   * 请求头
+   */
+  headers: {
+    type: Object,
+    default: () => {
+      return {
+        Authorization: localStorage.getItem(TOKEN_KEY),
+      };
+    },
+  },
+  /**
+   * 请求参数
+   */
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  /**
+   * 上传文件字段名
+   */
+  name: {
+    type: String,
+    default: "file",
+  },
+  /**
+   * 样式
+   */
+  style: {
+    type: Object,
+    default: () => {
+      return {
+        width: "300px",
+      };
+    },
+  },
+});
+
+const fileList = ref([] as UploadUserFile[]);
+const valFileList = ref([] as UploadUserFile[]);
+const showUploadPercent = ref(false);
+const uploadPercent = ref(0);
+
+watch(
+  () => props.modelValue,
+  (newVal: UploadUserFile[]) => {
+    const filePaths = fileList.value.map((file) => file.url);
+    const fileNames = fileList.value.map((file) => file.name);
+    // 监听modelValue文件集合值未变化时，跳过赋值
+    if (
+      filePaths.length > 0 &&
+      filePaths.length === newVal.length &&
+      filePaths.every((x) => newVal.some((y) => y.url === x)) &&
+      newVal.every((y) => filePaths.some((x) => x === y.url)) &&
+      fileNames.every((x) => newVal.some((y) => y.name === x)) &&
+      newVal.every((y) => fileNames.some((x) => x === y.name))
+    ) {
+      return;
+    }
+
+    if (newVal.length <= 0) {
+      fileList.value = [];
+      return;
+    }
+
+    fileList.value = newVal.map((file) => {
+      return { name: file.name, url: file.url } as UploadFile;
+    });
+
+    valFileList.value = newVal.map((file) => {
+      return { name: file.name, url: file.url } as UploadFile;
+    });
+  },
+  { immediate: true }
+);
+
+/**
+ * 限制用户上传文件的大小
+ */
+function handleBeforeUpload(file: UploadRawFile) {
+  if (file.size > props.uploadMaxSize) {
+    let mUploadMaxSize = props.uploadMaxSize / 1024 / 1024;
+    ElMessage.warning("上传文件不能大于" + mUploadMaxSize + "M");
+    return false;
+  }
+  uploadPercent.value = 0;
+  showUploadPercent.value = true;
+  return true;
+}
+
+const handleSuccessFile = (response: any, file: UploadFile) => {
+  showUploadPercent.value = false;
+  uploadPercent.value = 0;
+  if (response.code === ResultEnum.SUCCESS) {
+    ElMessage.success("上传成功");
+    valFileList.value.push({
+      name: file.name,
+      url: response.data.url,
+    });
+    emit("update:modelValue", valFileList.value);
+    return;
+  } else {
+    ElMessage.error(response.msg || "上传失败");
+  }
+};
+
+const handleError = (error: any) => {
+  showUploadPercent.value = false;
+  uploadPercent.value = 0;
+  ElMessage.error("上传失败");
+};
+
+const customColorMethod = (percentage: number) => {
+  if (percentage < 30) {
+    return "#909399";
+  }
+  if (percentage < 70) {
+    return "#375ee8";
+  }
+  return "#67c23a";
+};
+
+const handleProgress = (event: UploadProgressEvent) => {
+  uploadPercent.value = event.percent;
+};
+
+/**
+ * 删除文件
+ */
+function handleRemove(removeFile: UploadUserFile) {
+  const filePath = removeFile.url;
+  if (filePath) {
+    FileAPI.deleteByPath(filePath).then(() => {
+      // 删除成功回调
+      valFileList.value = valFileList.value.filter(
+        (file) => file.url !== filePath
+      );
+      emit("update:modelValue", valFileList.value);
+    });
+  }
+}
+
+/**
+ * 下载文件
+ */
+function downloadFile(file: UploadUserFile) {
+  const filePath = file.url;
+  if (filePath) {
+    FileAPI.downloadFile(filePath, file.name);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-upload-list__item .el-icon--close {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  color: var(--el-text-color-regular);
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity var(--el-transition-duration);
+  transform: translateY(-50%);
+}
+
+:deep(.el-upload-list) {
+  margin: 0;
+}
+
+:deep(.el-upload-list__item) {
+  margin: 0;
+}
+
+.show-upload-btn {
+  :deep(.el-upload) {
+    display: inline-flex;
+  }
+}
+
+.hide-upload-btn {
+  :deep(.el-upload) {
+    display: none;
+  }
+}
+</style>

src/components/Upload/ImageUpload.vue

@@ -1,4 +1,4 @@
-<!-- 多图上传组件 -->
+<!-- 图片上传组件 -->
 <template>
   <el-upload
     v-model:file-list="fileList"

src/views/demo/upload.vue

@@ -1,6 +1,7 @@
-<!-- 文件上传组件(单图+多图)示例 -->
+<!-- 文件上传组件示例 -->
 <script setup lang="ts">
 import ImageUpload from "@/components/Upload/ImageUpload.vue";
+import FileUpload from "@/components/Upload/FileUpload.vue";
 const size = ref("");
 // 这里放外链图片，防止被删
 const picUrls = ref([
@@ -10,7 +11,7 @@ const picUrls = ref([
   "https://s2.loli.net/2023/05/24/e1bcnEq3MFdmlNL.jpg",
   "https://s2.loli.net/2023/05/24/wZTSPj1yDQNcuhU.jpg",
 ]);
-const tableData = [
+const imageUploadArgData = [
   {
     argsName: "v-model",
     type: "Arrays",
@@ -24,13 +25,13 @@ const tableData = [
     desc: "上传最大的图片数量",
   },
   {
-    argsName: "showDelBtn",
+    argsName: "show-del-btn",
     type: "Boolean",
     default: true,
     desc: "是否显示删除按钮",
   },
   {
-    argsName: "showUploadBtn",
+    argsName: "show-upload-btn",
     type: "Boolean",
     default: true,
     desc: "是否显示上传按钮",
@@ -42,12 +43,110 @@ const tableData = [
     desc: "上传文件类型",
   },
   {
-    argsName: "uploadMaxSize",
+    argsName: "upload-max-size",
     type: "Number",
     default: "2 * 1024 * 1024",
     desc: "单个图片上传大小限制(单位byte)",
   },
 ];
+
+const fileUrls = ref([
+  {
+    name: "file one.jpg",
+    url: "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
+  },
+  {
+    name: "file two.jpg",
+    url: "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
+  },
+]);
+
+const fileUploadArgData = [
+  {
+    argsName: "v-model",
+    type: "Arrays",
+    default: "[]",
+    desc: "已经上传的文件数组",
+  },
+  {
+    argsName: "action",
+    type: "String",
+    default: "FileAPI.uploadUrl",
+    desc: "文件上传地址",
+  },
+  {
+    argsName: "limit",
+    type: "Number",
+    default: 10,
+    desc: "上传最大的文件数量",
+  },
+  {
+    argsName: "show-del-btn",
+    type: "Boolean",
+    default: true,
+    desc: "是否显示删除按钮",
+  },
+  {
+    argsName: "show-upload-btn",
+    type: "Boolean",
+    default: true,
+    desc: "是否显示上传按钮",
+  },
+  {
+    argsName: "upload-max-size",
+    type: "Number",
+    default: "2 * 1024 * 1024",
+    desc: "单个文件上传大小限制(单位byte)",
+  },
+  {
+    argsName: "accept",
+    type: "String",
+    default: "*",
+    desc: "上传文件类型",
+  },
+  {
+    argsName: "upload-btn-text",
+    type: "String",
+    default: "上传文件",
+    desc: "上传按钮文本",
+  },
+  {
+    argsName: "show-tip",
+    type: "Boolean",
+    default: false,
+    desc: "是否显示提示",
+  },
+  {
+    argsName: "tip",
+    type: "String",
+    default: '""',
+    desc: "提示文本",
+  },
+  {
+    argsName: "headers",
+    type: "Object",
+    default: "{Authorization: localStorage.getItem(TOKEN_KEY),}",
+    desc: "提示文本类型",
+  },
+  {
+    argsName: "data",
+    type: "Object",
+    default: "{}",
+    desc: "请求携带的额外参数",
+  },
+  {
+    argsName: "name",
+    type: "String",
+    default: "file",
+    desc: "上传文件的参数名",
+  },
+  {
+    argsName: "style",
+    type: "Object",
+    default: "{width:'300px'}",
+    desc: "上传组件的样式",
+  },
+];
 </script>
 <template>
   <div class="app-container">
@@ -64,13 +163,28 @@ const tableData = [
       <el-form-item label="图片上传">
         <image-upload v-model="picUrls" />
       </el-form-item>
-    </el-form>
-    <el-form>
       <el-form-item label="参数说明">
-        <el-table :data="tableData" border>
+        <el-table :data="imageUploadArgData" 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="default" label="默认值" width="400" />
+          <el-table-column prop="desc" label="描述" width="300" />
+        </el-table>
+      </el-form-item>
+      <el-form-item label="文件上传">
+        <file-upload
+          v-model="fileUrls"
+          :showUploadBtn="true"
+          :showDelBtn="true"
+          :show-tip="false"
+          :limit="3"
+        />
+      </el-form-item>
+      <el-form-item label="参数说明">
+        <el-table :data="fileUploadArgData" border>
+          <el-table-column prop="argsName" label="参数名称" width="300" />
+          <el-table-column prop="type" label="参数类型" width="200" />
+          <el-table-column prop="default" label="默认值" width="400" />
           <el-table-column prop="desc" label="描述" width="300" />
         </el-table>
       </el-form-item>