diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 5b762e6..4605c74 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -124,12 +124,12 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => { const index = fileList.value.findIndex((item) => item.response?.data === res.data) fileList.value.splice(index, 1) // console.log("res",res) - uploadList.value.push({ name: res.data[0]+"&&$#$"+res.data[1]+" ", url: res.data[0]+"&&$#$"+res.data[1]+" "}) + uploadList.value.push({ name: (res.data[0]+"&&$#$"+res.data[1])+" ", url: (res.data[0]+"&&$#$"+res.data[1])+" "}) if (uploadList.value.length == uploadNumber.value) { - // console.log("uploadList.value",uploadList.value) fileList.value.push(...uploadList.value) MysqlUrl.value.push(...uploadList.value) - // console.log("fileList.value111",fileList.value) + console.log("fileList.value",fileList.value) + console.log("MysqlUrl.value",MysqlUrl.value) uploadList.value = [] uploadNumber.value = 0 emitUpdateModelValue() @@ -145,10 +145,26 @@ 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) - emitUpdateModelValue() + // fileList.value.forEach(function (item){ + // 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() } } const handlePreview: UploadProps['onPreview'] = (uploadFile) => { @@ -159,12 +175,11 @@ 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 } - fileList.value = [] // 保障数据为空 // 情况1:字符串 if (isString(val)) { @@ -175,23 +190,55 @@ watch( } // 情况2:数组 fileList.value.push( - ...(val as string[]).map((url) => ({ name: url.substring(url.indexOf("[")+1,url.indexOf("&&$#")), url:url.substring(url.indexOf("&&$#")+5,url.length-1) })) + ...(val as string[]).map((url) => ({ name: url.substring(0,url.indexOf("&&$#")),url:url.substring(url.indexOf("&&$#")+5,url.length) })) ) - // console.log( fileList.value) + if (val[0]==""){ + fileList.value = [] + } + 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("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) + emit('update:modelValue', result) + MysqlUrl.value = [] +}