html5 - FileReader怎樣一次讀取多個(gè)文件?
問題描述
<input type='file' name='sendfile' v-show=’false’ accept='image/png,image/gif,image/jpeg' @change=’upload’ multiple>
如上,一個(gè)支持多圖片上傳的input,怎么用filereader本地讀取出每個(gè)圖片的dataurl?這個(gè)upload該怎么寫?
問題解答
回答1:循環(huán)讀取啊
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) } }})
相關(guān)文章:
1. android - weex 項(xiàng)目createInstanceReferenceError: Vue is not defined2. javascript - 如圖,百度首頁,查看源代碼為什么什么都沒有?3. 網(wǎng)頁爬蟲 - python requests爬蟲,如何post payload4. npm鏡像站全新上線5. html - 關(guān)于CSS實(shí)現(xiàn)border的0.5px設(shè)置?6. PHPExcel表格導(dǎo)入數(shù)據(jù)庫怎么導(dǎo)入7. android - 哪位大神知道java后臺(tái)的api接口的對(duì)象傳到前端后輸入日期報(bào)錯(cuò),是什么情況?求大神指點(diǎn)8. pdo 寫入到數(shù)據(jù)庫的內(nèi)容為中文的時(shí)候?qū)懭雭y碼9. PHP類封裝的插入數(shù)據(jù),總是插入不成功,返回false;10. vue2.0+webpack 如何使用bootstrap?
