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

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

  •  
  •   aoscici2000 · 2019-06-05 15:48:17 +08:00 · 3006 次点击
    这是一个创建于 1983 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
    saberlove
        1
    saberlove  
       2019-06-05 15:51:40 +08:00   ❤️ 1
    使用 Promise 封装 reader 然后 Promise.all()
    randyo
        2
    randyo  
       2019-06-05 15:52:38 +08:00 via Android
    用 promise
    dearxe2v
        3
    dearxe2v  
       2019-06-05 16:02:43 +08:00
    至少你的 ajax 要在 reader.onload 里面调用,至于时机嘛:最后一个 onload,可以简单的使用一个 i 变量来计数
    dongyx
        4
    dongyx  
       2019-06-05 17:12:50 +08:00   ❤️ 1
    + 赞同 1 楼用 Promise 封装 FileReader 的做法,https://segmentfault.com/a/1190000004451095 这里有一个封装的例子可以供楼主参考

    + 文件比较多的话使用 Promise.all 可能会有性能问题,建议串行执行 Promise:tasks.reduce((partial, task) => partial.then(task))
    phobal
        5
    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
        6
    phobal  
       2019-06-05 17:28:42 +08:00
    v 站代码块做得太差了,凑合着看吧
    kzfile
        7
    kzfile  
       2019-06-05 17:34:24 +08:00
    promise 自己封或者 lodash 里找找类似功能的
    life1st
        8
    life1st  
       2019-06-06 08:23:12 +08:00 via iPhone
    …最简单的是在 onload 里判断数组长度吧
    saberlove
        9
    saberlove  
       2019-06-25 13:25:39 +08:00
    @dongyx 赞同使用分块进行处理
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2144 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 16:12 · PVG 00:12 · LAX 08:12 · JFK 11:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.