# 原生js上传组件 > 需要实现一次上传多张图片的功能 > 最简单的做法： js部分： ~~~ upload (e) { var FileLists = e.target.files var render = new FileReader() render.readAsDataURL(FileLists[0]) render.onload = e => { console.log(this.$refs) this.isShow = false this.showImg = e.target.result } } ~~~ html部分： ~~~ <div> <div class="l-upload"> <div class="l-upload-item"> <div class="l-upload-show"> <img v-if="isShow" :src="uploadImg" alt="无法显示"> <img v-else ref="show" :src="showImg" alt="无法显示"/> </div> <input @change="upload" class="l-upload-file" name="file" type="file" ref="upload" multiple="multiple"> </div> </div> </div> ~~~ 资料参考： [兼容ie,火狐](https://blog.csdn.net/luckyJieXu/article/details/71171603) [FileReader对象](https://blog.csdn.net/zk437092645/article/details/8745647/)