html5 - FileReader怎样一次读取多个文件?
本文介绍了html5 - FileReader怎样一次读取多个文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<input type="file" name="sendfile" id="sendfile" v-show='false' accept="image/png,image/gif,image/jpeg" @change='upload' multiple>
如上,一个支持多图片上传的input,怎么用filereader本地读取出每个图片的dataurl?这个upload该怎么写?
解决方案
循环读取啊
new Vue({
el: 'app',
methods: {
async upload () {
const files = event.target.files
const uploadList = []
console.log(files)
const readFileAsync = file => new Promise(resolve => {
const reader = new FileReader()
reader.onload = evt => resolve(evt.target.result)
reader.readAsDataURL(file)
})
for (let i = 0; i < files.length; i++) {
uploadList.push(await readFileAsync(files[i]))
}
event.target.value = null
console.log(uploadList)
}
}
})
这篇关于html5 - FileReader怎样一次读取多个文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文