const uploadImage = (files: any) => {
const data: { title: any; url: string }[] = []
files.forEach(async (file: any) => {
const formData = new FormData()
formData.append('file', file)
const res = await uploadFile(7, formData)
data.push({ title: file.name, url: config.file_host + res.data.fileUrl })
console.log(data) })
return data }
这段代码接口还没调用完就返回了 空的结果,要怎么修改?
你的问题似乎是关于JavaScript的异步操作。在你的代码中,forEach
内部是一个异步操作(uploadFile(7, formData)
),但是你没有等待它完成。forEach
不会等待每个迭代都完成,所以它会立即返回,这就是为什么你得到一个空的结果。
你需要使用for...of
循环或者for...in
循环来代替forEach
,以便能够等待每个异步操作完成。以下是修改后的代码:
const uploadImage = (files: any) => {
const data: { title: any; url: string }[] = []
for (let file of files) { // 使用for...of循环
const formData = new FormData()
formData.append('file', file)
const res = await uploadFile(7, formData)
data.push({
title: file.name,
url: config.file_host + res.data.fileUrl
})
console.log(data)
}
return data
}
注意:这段代码还是会有一些问题。当你使用await
在一个普通的函数(forEach
内部)中时,它将使这个函数返回一个Promise,而这并不是forEach
所期望的。在forEach
的上下文中,你无法直接使用await
。
如果你需要处理一个文件数组并且每个文件都需要进行异步操作,你可能需要使用像map
这样的函数来生成一个Promise数组,然后使用Promise.all()
等待所有操作都完成。但是这需要将你的上传函数(uploadFile
)进行一些修改,使其能够返回一个Promise。例如:
const uploadImage = async (files: any) => {
const data: { title: any; url: string }[] = []
const promises = files.map(file => {
const formData = new FormData()
formData.append('file', file)
return uploadFile(7, formData).then(res => {
data.push({
title: file.name,
url: config.file_host + res.data.fileUrl
})
console.log(data)
})
})
await Promise.all(promises)
return data
}