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 相关文章推荐
图象函数中的中文显示
Oct 09 PHP
聊天室php&amp;mysql(六)
Oct 09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
Oct 22 PHP
10条PHP高级技巧[修正版]
Aug 02 PHP
php+js iframe实现上传头像界面无跳转
Apr 29 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
Jul 04 PHP
ThinkPHP框架设计及扩展详解
Nov 25 PHP
php安装ssh2扩展的方法【Linux平台】
Jul 20 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
Jun 10 PHP
PHP定义字符串的四种方式详解
Feb 06 PHP
PHP匿名函数(闭包函数)详解
Mar 22 PHP
TP5框架实现上传多张图片的方法分析
Mar 29 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
python简单实现计算过期时间的方法
2015/06/09 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
推广普通话的宣传语
2015/07/13 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python