tp5实现微信小程序多图片上传到服务器功能


Posted in PHP onJuly 16, 2018

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助。

1,小程序端:

在wxml文件中:

<!--选择图片 -->
<view class="picture">
<view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
<view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">删除</view>
</view>
<view class="clickImg" bindtap="chooseImg">点击上传作业</view>
</view>
<!-- 选择图片end -->

在js文件中:

Page({
/**
 * 页面的初始数据
*/
data: {
 index: 0,
 multiIndex: [0, 0],
//传到后台的课程分类
cname:'',
 },
/**
 * 生命周期函数--监听页面加载
*/
onLoad: function (options) {
 },
/**
 * 
 * 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
 },
/**
 * 生命周期函数--监听页面显示
*/
onShow: function () {
 },
/**
 * 生命周期函数--监听页面隐藏
*/
onHide: function () {
 },
/**
 * 生命周期函数--监听页面卸载
*/
onUnload: function () {
 },
/**
 * 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
 },
/**
 * 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
 },
/**
 * 用户点击右上角分享
*/
onShareAppMessage: function () {
 },
// 上传图片操作
// 上传图片
chooseImg: function (e) {
var that = this;
if(that.data.cname==''){
 }else{
var imgs = this.data.imgs;
if (imgs.length >= 9) {
this.setData({
 lenMore: 1
 });
 setTimeout(function () {
 that.setData({
 lenMore: 0
 });
 }, 2500);
return false;
 }
 wx.chooseImage({
// count: 1, // 默认9
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
// console.log(tempFilePaths + '----');
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs.length >= 9) {
 that.setData({
 imgs: imgs
 });
return false;
 } else {
 imgs.push(tempFilePaths[i]);
 }
 }
// console.log(imgs);
 that.setData({
 imgs: imgs,
 });
//循环把图片上传到服务器
for (var i = 0; i < imgs.length; i++) {
 wx.uploadFile({
 url: url + 'Wx_SaveHomeWork',
 filePath: imgs[i],
 name: 'files',
 formData: {
 cname: that.data.cname
 },
 success: function (res) {
 console.log(res)
 }
 })
 }
 }
 });
 }
 },
// 删除图片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
 imgs.splice(index, 1);
this.setData({
 imgs: imgs
 });
 },
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
 wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
 })
 },
})

2,我们注意到我的wx.request请求中Wx_SaveHomeWork方法是后台服务器的接收图片方法,

后边我会把这个方法展示出来,

3.tp5后台controller中:

//存取学生作业信息
  public function Wx_SaveHomeWork(){
    $files=\request()->file('files');
    $cname=\request()->param('cname');
    $cid=Db::name('course')->where('cname',$cname)->value('id');
    $max_id=Db::name('homework')->max('id');
    foreach($files as $item){
// 移动到框架应用根目录/public/uploads/ 目录下
      $info = $files->rule('date')->move(ROOT_PATH . 'public' . DS . 'uploads');
      if($info){
        $saveName=str_replace("\\","/",$info->getSaveName());
        $img='/uploads/'.$saveName;
        $homework[]=['id'=>$max_id+1,'img'=>$img,'cid'=>$cid];
      }
    }
    //把数据插入到作业表中
    \db('homework')->insertAll($homework);
  }

这里说一下,max_id的作用,因为接受的是多张图片,相当于一次性要存储多条数据,所以用max_id对id进行自增,存储到数据库表,cid是我自己数据库逻辑需要用到的变量,可以不用考虑,

4.讲解的不够清楚,因为是自己写的,感受不到难点在哪里,我自己的难点是在小程序端的图片上传,用了for循环,循环上传的方法,其他的相对来说,逻辑比较简单。

总结

以上所述是小编给大家介绍的tp5实现微信小程序多图片上传到服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
深入理解PHP原理之异常机制
Aug 21 PHP
Php图像处理类代码分享
Jan 19 PHP
PHP setTime 设置当前时间的代码
Aug 27 PHP
PHP判断变量是否为0的方法
Feb 08 PHP
PHP中使用sleep函数实现定时任务实例分享
Aug 21 PHP
smarty简单应用实例
Nov 03 PHP
Zend Framework教程之Zend_Registry对象用法分析
Mar 22 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
Jan 13 PHP
简单谈谈PHP中的trait
Feb 25 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
Sep 28 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
Apr 04 PHP
Laravel关系模型指定条件查询方法
Oct 10 PHP
PHP 爬取网页的主要方法
Jul 13 #PHP
php实现微信发红包功能
Jul 13 #PHP
Yii2框架redis基本应用示例
Jul 13 #PHP
Yii2框架实现登陆添加验证码功能示例
Jul 12 #PHP
Yii框架日志记录Logging操作示例
Jul 12 #PHP
php unlink()函数使用教程
Jul 12 #PHP
总结PHP代码规范、流程规范、git规范
Jun 18 #PHP
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js实现表格字段排序
2014/02/19 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
shiro授权的实现原理
2017/09/21 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python日志logging模块使用方法分析
2019/05/23 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python中的插入排序的简单用法
2021/01/19 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
英文简历自荐信范文
2013/12/11 职场文书
大学生实习证明范本
2014/01/15 职场文书
库房管理员岗位职责
2014/03/09 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
签约仪式致辞
2015/07/30 职场文书
初中毕业生感言
2015/07/31 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers