I'm Sham
一个想做码农的行政文员

小程序制作笔记-图片上传并生成缩略图

因为近期公司计划做个摄影比赛,需要收集员工的照片作品,因为肯定是需要原图的,那样通过公司邮箱显然是不方便的,于是想到在小程序中添加图片上传功能,以前Sham用过每次添加1张图片,然后上传到服务器及数据库,趁这次机会,再次学习研究优化了代码,目前能够做到:

  1. 用户能一次性添加多张图片(原图),然后会展示出来(目前无法预览添加的图片,待继续优化),同时会弹窗提醒是否上传,确认则上传,取消则清空;
  2. 上传图片到服务器时,自动生成缩略图,并且同时存储原图和缩略图到各自文件夹,然后返回缩略图值,用于展示及传到数据库中;
  3. 提交表单后,用户查看记录时,初始加载缩略图,点击缩略图,会放大预览原图,提高用户加载速度和减少流量浪费;

下面,就来上代码:

首先是小程序端,JS中添加

然后是小程序端的WXML

顺带附上Sham用的WXSS

这样小程序端就完成了,然后就是服务器接收啦,imgupload.php

这样,小程序上传图片,并生成原图、缩略图分类存放就完成了,如果是多图上传的,返回的是图片地址数组,上传数据库并后期调用的话,可根据自己需求,在提交时就通过for循环来依次提交,或者上传数据库后下次读取的时候再循环列出来,这个就自行处理吧

赞(0) 赏杯咖啡!
未经允许不得转载:Sham@双目瞿 » 小程序制作笔记-图片上传并生成缩略图

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果你觉得文章好,请赏1杯速溶咖啡给Sham吧!

微信扫一扫打赏