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

Javascript 读取多个文件怎么全部读取完统一发 ajax - V2EX

首页注册登录

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 2323 天前的主题，其中的信息可能已经有所发展或是发生改变。

let request_data = [] for (let item of list) { letreader=newFileReader() 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) })

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

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

读取

Let

Data

resp

9 条回复 2019-06-25 13:25:39 +08:00

saberlove

2019-06-05 15:51:40 +08:00

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

randyo

2019-06-05 15:52:38 +08:00 via Android

用 promise

dearxe2v

2019-06-05 16:02:43 +08:00

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

dongyx

2019-06-05 17:12:50 +08:00

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

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

phobal

2019-06-05 17:27:23 +08:00

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

2019-06-05 17:28:42 +08:00

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