feat: 🚀 视频上传可以覆盖上传

src/components/Upload/UploadVideo.vue

@@ -9,11 +9,13 @@
             :show-file-list="false"
             :http-request="handleHttpUpload"
             :before-upload="beforeUpload"
-            :on-success="uploadSuccess"
             :on-error="uploadError"
+            :on-exceed="handleExceed"
             :limit="1"
             :accept="fileType.join(',')"
+            ref="upload"
         >
+            <!-- :on-success="uploadSuccess" -->
             <!-- disabled -->
             <el-input v-model="videoShowUrl" style="width: 414px" @click.stop @input="handleInput">
                 <template #prepend
@@ -33,9 +35,10 @@ import { FolderAdd } from "@element-plus/icons-vue";
 import { ref, computed, inject } from "vue";
 import { generateUUID } from "@/utils";
 import { uploadVideo } from "@/api/modules/upload";
+import { genFileId } from "element-plus";
 import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
-import type { UploadProps, UploadRequestOptions } from "element-plus";
-
+import type { UploadProps, UploadRawFile, UploadInstance } from "element-plus";
+//UploadRequestOptions
 interface UploadFileProps {
     videoUrl: any; // 图片地址 ==> 必传
     api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
@@ -69,7 +72,7 @@ const routerName = ref(routerObj[routerValueName]);
 
 // 生成组件唯一id
 const uuid = ref("id-" + generateUUID());
-
+const upload = ref<UploadInstance>();
 // 获取 el-form 组件上下文
 const formContext = inject(formContextKey, void 0);
 // 获取 el-form-item 组件上下文
@@ -86,23 +89,45 @@ interface UploadEmits {
     (e: "update:videoUrl", value: string): void;
 }
 const emit = defineEmits<UploadEmits>();
-const handleHttpUpload = async (options: UploadRequestOptions) => {
+const handleHttpUpload = async (options: any) => {
     let formData = new FormData();
     formData.append("video", options.file);
     try {
         const api = props.api ?? uploadVideo;
         const { data } = await api(formData, routerName.value);
-        emit("update:videoUrl", data.path);
-        // 调用 el-form 内部的校验方法（可自动校验）
-        formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+        if (data.path) {
+            ElNotification({
+                title: "温馨提示",
+                message: "视频上传成功！",
+                type: "success"
+            });
+            emit("update:videoUrl", data.path);
+            // 调用 el-form 内部的校验方法（可自动校验）
+            formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+        } else {
+            videoShowUrl.value = "";
+            emit("update:videoUrl", "");
+        }
     } catch (error) {
+        videoShowUrl.value = "";
+        emit("update:videoUrl", "");
+        if (!error) {
+            return;
+        }
         options.onError(error as any);
     }
 };
-
+const handleExceed: UploadProps["onExceed"] = files => {
+    upload.value!.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    let options: any = {
+        file
+    };
+    handleHttpUpload(options);
+};
 const handleInput = () => {
     emit("update:videoUrl", videoShowUrl.value);
-    console.log("会触发吗");
 };
 
 /**
@@ -132,13 +157,13 @@ const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
 /**
  * @description 视频上传成功
  * */
-const uploadSuccess = () => {
-    ElNotification({
-        title: "温馨提示",
-        message: "视频上传成功！",
-        type: "success"
-    });
-};
+// const uploadSuccess = () => {
+//     ElNotification({
+//         title: "温馨提示",
+//         message: "视频上传成功！",
+//         type: "success"
+//     });
+// };
 
 /**
  * @description 视频上传错误
@@ -153,7 +178,9 @@ const uploadError = () => {
 watch(
     () => props.videoUrl,
     (newVal: any) => {
-        videoShowUrl.value = newVal;
+        if (newVal) {
+            videoShowUrl.value = newVal;
+        }
     }
 );
 </script>

src/views/productManagement/list/components/basicInfo.vue

@@ -26,7 +26,12 @@
             </el-form-item>
 
             <el-form-item label="产品参数">
-                <el-input v-model="_ruleFormParam.params" style="width: 440px" />
+                <el-input
+                    v-model="_ruleFormParam.params"
+                    style="width: 440px"
+                    type="textarea"
+                    :autosize="{ minRows: 10, maxRows: 20 }"
+                />
             </el-form-item>
 
             <el-form-item label="产品排序" style="width: 440px" required>