javascript 读取多个文件 怎么全部读取完统一发 ajax

[aoscici2000]

let request_data = []

for (let item of list) {
	let reader = new FileReader()
	reader.readAsDataURL(item)
	reader.onload = (e) => {
		let base64Str = e.target.result
		request_data.push(base64Str )
	}
} // end for

$axios({
	url: '/upload',
	method: 'post',
	data: {
		data: request_data
	},
})
.then((resp) => {
	console.log(resp.data)
})

如题, 没等数据读完, 请求倒是先发出去了,

怎样能等到数据读取完毕了才发请求, 或者读取文件怎么同步读取?

[saberlove]

使用 Promise 封装 reader 然后 Promise.all()

[randyo]

用 promise

[dearxe2v]

至少你的 ajax 要在 reader.onload 里面调用，至于时机嘛：最后一个 onload，可以简单的使用一个 i 变量来计数

[dongyx]

+ 赞同 1 楼用 Promise 封装 FileReader 的做法，https://segmentfault.com/a/1190000004451095 这里有一个封装的例子可以供楼主参考

+ 文件比较多的话使用 Promise.all 可能会有性能问题，建议串行执行 Promise：tasks.reduce((partial, task) => partial.then(task))

[phobal]

function readFile (list) {
return new Promise((resolve) => {
let request_data = []
for (let item of list) {
let reader = new FileReader()
reader.readAsDataURL(item)
reader.onload = (e) => {
let base64Str = e.target.result
request_data.push(base64Str )
}
}
resolve(request_data)
})
}

async function upload() {
const data = await readFile([])
$axios({
url: '/upload',
method: 'post',
data: {
data,
},
}).then(res => {
console.log(res.data)
})
}

[phobal]

v 站代码块做得太差了，凑合着看吧

[penisulaS]

promise 自己封或者 lodash 里找找类似功能的

[life1st]

…最简单的是在 onload 里判断数组长度吧

[saberlove]

@dongyx 赞同使用分块进行处理