feat: ✨ 新增文件上传组件

src/components/Upload/FileUpload.vue

@@ -108,7 +108,7 @@ const props = defineProps({
     default: true,
   },
   /**
-   * 单张图片最大大小
+   * 单个文件上传大小限制(单位byte)
    */
   uploadMaxSize: {
     type: Number,
@@ -154,7 +154,7 @@ const props = defineProps({
     },
   },
   /**
-   * 请求参数
+   * 请求携带的额外参数
    */
   data: {
     type: Object,
@@ -163,7 +163,7 @@ const props = defineProps({
     },
   },
   /**
-   * 上传文件字段名
+   * 上传文件的参数名
    */
   name: {
     type: String,

src/components/Upload/ImageUpload.vue

@@ -10,6 +10,7 @@
     :action="props.action"
     :headers="props.headers"
     :data="props.data"
+    :name="props.name"
     :on-success="handleSuccessFile"
     :on-error="handleError"
     :accept="props.accept"
@@ -17,7 +18,7 @@
   >
     <i-ep-plus />
     <template #file="{ file }">
-      <div>
+      <div style="width: 100%">
         <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)">
@@ -84,7 +85,7 @@ const props = defineProps({
     },
   },
   /**
-   * 请求参数
+   * 请求携带的额外参数
    */
   data: {
     type: Object,
@@ -92,6 +93,13 @@ const props = defineProps({
       return {};
     },
   },
+  /**
+   * 上传文件的参数名
+   */
+  name: {
+    type: String,
+    default: "file",
+  },
   /**
    * 文件上传数量限制
    */
@@ -190,14 +198,11 @@ const handleError = (error: any) => {
  */
 function handleRemove(removeFile: UploadFile) {
   const filePath = removeFile.url;
-
   if (filePath) {
     FileAPI.deleteByPath(filePath).then(() => {
+      valFileList.value = valFileList.value.filter((x) => x !== filePath);
       // 删除成功回调
-      emit(
+      emit("update:modelValue", valFileList.value);
-        "update:modelValue",
-        fileList.value.map((file) => file.url)
-      );
     });
   }
 }

src/components/Upload/SingleUpload.vue

@@ -1,77 +0,0 @@
-<template>
-  <!-- 上传组件 -->
-  <el-upload
-    v-model="imgUrl"
-    class="single-uploader"
-    :show-file-list="false"
-    list-type="picture-card"
-    :before-upload="handleBeforeUpload"
-    :http-request="uploadFile"
-  >
-    <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
-    <el-icon v-else class="single-uploader__icon"><i-ep-plus /></el-icon>
-  </el-upload>
-</template>
-
-<script setup lang="ts">
-import { UploadRawFile, UploadRequestOptions } from "element-plus";
-import FileAPI from "@/api/file";
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-const imgUrl = useVModel(props, "modelValue", emit);
-
-/**
- * 自定义图片上传
- *
- * @param options
- */
-async function uploadFile(options: UploadRequestOptions): Promise<any> {
-  const data = await FileAPI.upload(options.file);
-  imgUrl.value = data.url;
-}
-
-/**
- * 限制用户上传文件的格式和大小
- */
-function handleBeforeUpload(file: UploadRawFile) {
-  if (file.size > 2 * 1048 * 1048) {
-    ElMessage.warning("上传图片不能大于2M");
-    return false;
-  }
-  return true;
-}
-</script>
-
-<style scoped lang="scss">
-.single-uploader {
-  overflow: hidden;
-  cursor: pointer;
-  border: 1px var(--el-border-color) solid;
-  border-radius: 6px;
-
-  &:hover {
-    border-color: var(--el-color-primary);
-  }
-
-  &__image {
-    display: block;
-    width: 178px;
-    height: 178px;
-  }
-
-  &___icon {
-    width: 178px;
-    height: 178px;
-    font-size: 28px;
-    color: #8c939d;
-    text-align: center;
-  }
-}
-</style>

src/views/demo/upload.vue

@@ -18,6 +18,30 @@ const imageUploadArgData = [
     default: "[]",
     desc: "已经上传的图片数组",
   },
+  {
+    argsName: "action",
+    type: "String",
+    default: "FileAPI.uploadUrl",
+    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: "limit",
     type: "Number",
@@ -36,18 +60,18 @@ const imageUploadArgData = [
     default: true,
     desc: "是否显示上传按钮",
   },
-  {
-    argsName: "accept",
-    type: "String",
-    default: "image/*",
-    desc: "上传文件类型",
-  },
   {
     argsName: "upload-max-size",
     type: "Number",
     default: "2 * 1024 * 1024",
     desc: "单个图片上传大小限制(单位byte)",
   },
+  {
+    argsName: "accept",
+    type: "String",
+    default: "image/*",
+    desc: "上传文件类型",
+  },
 ];
 
 const fileUrls = ref([
@@ -172,13 +196,7 @@ const fileUploadArgData = [
         </el-table>
       </el-form-item>
       <el-form-item label="文件上传">
-        <file-upload
+        <file-upload v-model="fileUrls" />
-          v-model="fileUrls"
-          :showUploadBtn="true"
-          :showDelBtn="true"
-          :show-tip="false"
-          :limit="3"
-        />
       </el-form-item>
       <el-form-item label="参数说明">
         <el-table :data="fileUploadArgData" border>