首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Coding
V2EX  ›  JavaScript

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

  •  
  •   aoscici2000 · 191 天前 · 977 次点击
    这是一个创建于 191 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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)
    })
    

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

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

    9 回复  |  直到 2019-06-25 13:25:39 +08:00
        1
    saberlove   191 天前   ♥ 1
    使用 Promise 封装 reader 然后 Promise.all()
        2
    randyo   191 天前 via Android
    用 promise
        3
    dearxe2v   191 天前
    至少你的 ajax 要在 reader.onload 里面调用,至于时机嘛:最后一个 onload,可以简单的使用一个 i 变量来计数
        4
    dongyx   191 天前   ♥ 1
    + 赞同 1 楼用 Promise 封装 FileReader 的做法,https://segmentfault.com/a/1190000004451095 这里有一个封装的例子可以供楼主参考

    + 文件比较多的话使用 Promise.all 可能会有性能问题,建议串行执行 Promise:tasks.reduce((partial, task) => partial.then(task))
        5
    phobal   191 天前
    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)
    })
    }
        6
    phobal   191 天前
    v 站代码块做得太差了,凑合着看吧
        7
    kzfile   191 天前
    promise 自己封或者 lodash 里找找类似功能的
        8
    life1st   191 天前 via iPhone
    …最简单的是在 onload 里判断数组长度吧
        9
    saberlove   172 天前
    @dongyx 赞同使用分块进行处理
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2405 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 06:05 · PVG 14:05 · LAX 22:05 · JFK 01:05
    ♥ Do have faith in what you're doing.