問題描述

<input type='file' name='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) } }})