文件上传

src/components/UploadFile/src/UploadFile.vue

@@ -128,8 +128,8 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
   if (uploadList.value.length == uploadNumber.value) {
     fileList.value.push(...uploadList.value)
     MysqlUrl.value.push(...uploadList.value)
-    console.log("fileList.value",fileList.value)
+    // console.log("fileList.value",fileList.value)
-    console.log("MysqlUrl.value",MysqlUrl.value)
+    // console.log("MysqlUrl.value",MysqlUrl.value)
     uploadList.value = []
     uploadNumber.value = 0
     emitUpdateModelValue()
@@ -145,25 +145,13 @@ const excelUploadError: UploadProps['onError'] = (): void => {
 }
 // 删除上传文件
 const handleRemove = (file: UploadFile) => {
-  console.log("fileList.value",fileList.value)
-  console.log("MysqlUrl.value",MysqlUrl.value)
   const index = fileList.value.map((f) => f.name).indexOf(file.name)
-  console.log("index"+index)
   if (index > -1) {
+    //删除文件链接已选择删除的链接
     fileList.value.splice(index, 1)
-    // fileList.value.forEach(function (item){
+    MysqlUrl.value.splice(index,1)
-    //   uploadList.value.push({ name: (item.name+"&&$#$"+item.url).trim(), url: (item.name+"&&$#$"+item.url).trim()})
-    //   console.log("uploadList2",uploadList.value)
-    //   console.log("fileList",fileList.value)
-    //   fileList.value.push(...uploadList.value)
-    //   MysqlUrl.value.push(...uploadList.value)
     // console.log("fileList",fileList.value)
     // console.log("MysqlUrl",MysqlUrl.value)
-    //   uploadList.value = []
-    // })
-    MysqlUrl.value.splice(index,1)
-    console.log("fileList",fileList.value)
-    console.log("MysqlUrl",MysqlUrl.value)
     emitUpdateModelValue2()
   }
 }
@@ -175,7 +163,7 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
 watch(
   () => props.modelValue,
   (val: string | string[]) => {
-    console.log("val",val)
+    // console.log("val",val)
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
       return
@@ -192,50 +180,41 @@ watch(
     fileList.value.push(
       ...(val as string[]).map((url) => ({ name: url.substring(0,url.indexOf("&&$#")),url:url.substring(url.indexOf("&&$#")+5,url.length) }))
     )
+    //val数据为空时 文件列表为空
     if (val[0]==""){
       fileList.value = []
     }
+    //val数据为空 val不为空 MysqlUrl长度为空时给MysqlUrl push val内的所有文件链接
     if (val[0]!==""&&val.length>0&&MysqlUrl.value.length==0){
-      // for (let i = 0; i < val.length; i++){
-      //   MysqlUrl.value.push(...val.map((U)=>({})));
-      // }
         MysqlUrl.value.push(
           ...(val as string[]).map((url) => ({ name: url,url: url}))
         );
-      // if (val[0] !== "" && val.length > 0) {
-      //   // 直接将字符串数组推入 MysqlUrl.value
-      //   MysqlUrl.value = [...val]; // 这样会覆盖之前的内容并只包含 val 中的字符串
-      // }
     }
-    console.log("11111fileList", fileList.value)
+    // console.log("11111fileList", fileList.value)
-    console.log("11111MysqlUrl", MysqlUrl.value)
+    // console.log("11111MysqlUrl", MysqlUrl.value)
   },
   { immediate: true, deep: true }
 )
 // 发送文件链接列表更新用于上传文件后
 const emitUpdateModelValue = () => {
-  console.log("fileList.value",fileList.value)
-  console.log("MysqlUrl.value",MysqlUrl.value)
   // 情况1：数组结果
   let result: string | string[] = MysqlUrl.value.map((file) => file.url!)
   // 情况2：逗号分隔的字符串
   if (props.limit === 1 || isString(props.modelValue)) {
     result = result.join(',')
   }
-  console.log("result",result)
+  // console.log("result",result)
   emit('update:modelValue', result)
 }
 // 发送文件链接列表更新用于删除文件后
 const emitUpdateModelValue2 = () => {
-  console.log("fileList.value2",fileList.value)
-  console.log("MysqlUrl.value2",MysqlUrl.value)
   // 情况1：数组结果
   let result: string | string[] = MysqlUrl.value.map((file) => file.url!)
   // 情况2：逗号分隔的字符串
   if (props.limit === 1 || isString(props.modelValue)) {
     result = result.join(',')
   }
-  console.log("result",result)
+  // console.log("result",result)
   emit('update:modelValue', result)
   MysqlUrl.value = []
 }