预览图片_TodoList:图片上传预览（file转base64存储）第四章

点击右上方红色按钮关注“web秀”&＃xff0c;让你真正秀起来

有了前面的代码&＃xff0c;这次添加图片附件就非常简单了&＃xff0c;这里就写个简单的示例&＃xff0c;后面优化样式等。

GitHub - javanf/todo-list: 待办任务管理

本次《todo list: Vue待办事项任务管理》&＃xff0c;分为一下章节&＃xff0c;有兴趣的同学可以持续关注。

第一章: 初识(项目搭建、基本功能组件实现)

第二章: 数据动态化处理(localStorage &＃43; Vuex)&＃xff0c;可新增&＃xff0c;可编辑

第三章&＃xff1a;待办事项自定义分组

第四章&＃xff1a;待办事项添加描述图片等信息

第五章&＃xff1a;可线上操作&＃xff0c;入库Mysql

第六章&＃xff1a;多人协同处理待办事项&＃xff0c;权限管理

第七章&＃xff1a;完结&＃xff1a;线上发布

初步定义7个章节&＃xff0c;实际开发中有可能有所增减。

1、input type&＃61;file选择文件

2、通过&＃64;change监听input框的改变事件&＃xff0c;获取图片文件

...

附件

1、监听input file框改变&＃xff0c;获取图片后将文件转换成base64格式的字符串(用于图片预览)

2、将值push到任务里面的imgs数组&＃xff0c;可以直接存储起来

3、点击图片通过弹框来预览大图片

methods: { preview (img) { this.previewImg &＃61; img this.$refs.previewImg.show() }, fileChange (e) { let vm &＃61; this // input 改变事件 let file &＃61; e.target.files[0] console.log(file) // 文件转base64 var reader &＃61; new FileReader() reader.readAsDataURL(file) reader.onload &＃61; function (e) { console.log(reader.result) vm.listItem.imgs.push(reader.result) } }, ... addItem (index) { this.groupIndex &＃61; index this.listItem &＃61; { name: &＃39;&＃39;, description: &＃39;&＃39;, level: 0, imgs: [] // 添加空的数组 } this.$refs.itemDetail.show() } }}

本章节的重点就是将文件转换成base64来预览&＃xff0c;当然这个主意是size比较小的图片&＃xff0c;如果是大图片还是通过上传到服务器的方式&＃xff0c;否则base64的字符串会非常的大。

GitHub - javanf/todo-list: 待办任务管理

喜欢小编的点击关注&＃xff0c;了解更多知识&＃xff01;

源码地址&＃xff0c;可以点击下方“了解更多”获取&＃xff01;