html5 - FileReader怎样一次读取多个文件?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-07 09:24:35
0
1
780
<input type="file" name="sendfile" id="sendfile" v-show='false' accept="image/png,image/gif,image/jpeg" @change='upload' multiple>

如上,一个支持多图片上传的input,怎么用filereader本地读取出每个图片的dataurl?这个upload该怎么写?

曾经蜡笔没有小新
曾经蜡笔没有小新

全部回复(1)
左手右手慢动作

循环读取啊

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)
    }
  }
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板