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 相关文章推荐
自己动手做一个SQL解释器
Oct 09 PHP
浅析PHP页面局部刷新功能的实现小结
Jun 21 PHP
PHP创建桌面快捷方式的实例代码
Feb 17 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
Jul 08 PHP
总结PHP中DateTime的常用方法
Aug 11 PHP
thinkPHP模板中for循环与switch语句用法示例
Nov 30 PHP
浅谈PHP的数据库接口和技术
Dec 09 PHP
PHP执行shell脚本运行程序不产生core文件的方法
Dec 28 PHP
PHP函数rtrim()使用中的怪异现象分析
Feb 24 PHP
Yii输入正确验证码却验证失败的解决方法
Jun 06 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
Aug 31 PHP
thinkphp5.1框架模板布局与模板继承用法分析
Jul 19 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
基于mysql的论坛(1)
2006/10/09 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php图片裁剪函数
2018/10/31 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python中dict使用方法详解
2019/07/17 Python
python中pyqtgraph知识点总结
2021/01/26 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
Ajax的工作原理
2015/12/04 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
英语国培研修感言
2014/02/13 职场文书
优秀护士获奖感言
2014/02/20 职场文书
给老师的一封感谢信
2015/01/20 职场文书
工作会议通知
2015/04/15 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书