yudao-team/yudao_ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件上传

Browse Source
This commit is contained in:
XaoLi717 2024-09-03 08:36:08 +08:00
parent 4f8a4f87f7
commit fc139ebf1d
1 changed files with 12 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/UploadFile/src/UploadFile.vue
View File

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