点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
有了前面的代码,这次添加图片附件就非常简单了,这里就写个简单的示例,后面优化样式等。
GitHub - javanf/todo-list: 待办任务管理
![7ce6323f1da8718ad9a0bf90a5696eb7.png](https://i-blog.csdnimg.cn/blog_migrate/4fbbff6c67133129450e49041f04a23c.jpeg)
本次《todo list: Vue待办事项任务管理》,分为一下章节,有兴趣的同学可以持续关注。
第一章: 初识(项目搭建、基本功能组件实现)
第二章: 数据动态化处理(localStorage + Vuex),可新增,可编辑
第三章:待办事项自定义分组
第四章:待办事项添加描述图片等信息
第五章:可线上操作,入库Mysql
第六章:多人协同处理待办事项,权限管理
第七章:完结:线上发布
初步定义7个章节,实际开发中有可能有所增减。
html页面调整
1、input type=file选择文件
2、通过@change监听input框的改变事件,获取图片文件
...
附件
![]()
![]()
![1fa111b146c72d81f64523a955ce3ab4.png](https://i-blog.csdnimg.cn/blog_migrate/03d45e30a43ffa88aa291b44e37dad86.jpeg)
![b030c99c96cdf579474844d63abf183b.png](https://i-blog.csdnimg.cn/blog_migrate/a25975c975d40f22b530b0a98228fbb8.jpeg)
对应JS事件
1、监听input file框改变,获取图片后将文件转换成base64格式的字符串(用于图片预览)
2、将值push到任务里面的imgs数组,可以直接存储起来
![0b7b4a896ede60492ea128aec2cab7bb.png](https://i-blog.csdnimg.cn/blog_migrate/0be1b1b7929dd9b7ac16acdb8bf8cd44.jpeg)
3、点击图片通过弹框来预览大图片
![54aa6748de2a617146964d5ace815c09.png](https://i-blog.csdnimg.cn/blog_migrate/e8c9d166f6e5803415779191adfd9a03.jpeg)
methods: { preview (img) { this.previewImg = img this.$refs.previewImg.show() }, fileChange (e) { let vm = this // input 改变事件 let file = e.target.files[0] console.log(file) // 文件转base64 var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (e) { console.log(reader.result) vm.listItem.imgs.push(reader.result) } }, ... addItem (index) { this.groupIndex = index this.listItem = { name: '', description: '', level: 0, imgs: [] // 添加空的数组 } this.$refs.itemDetail.show() } }}
![7b23d47894137a140b4269589366e4b9.png](https://i-blog.csdnimg.cn/blog_migrate/f97bf7feb055bc54eccc88a351b6f1d6.jpeg)
预览图
![8a05bbb97b488f5f8b9bd3bed3928aa4.png](https://i-blog.csdnimg.cn/blog_migrate/a27d936f481a68c4caee9b202535a06f.jpeg)
总结
本章节的重点就是将文件转换成base64来预览,当然这个主意是size比较小的图片,如果是大图片还是通过上传到服务器的方式,否则base64的字符串会非常的大。
GitHub - javanf/todo-list: 待办任务管理
公告
喜欢小编的点击关注,了解更多知识!
源码地址,可以点击下方“了解更多”获取!