• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    tp5实现微信小程序多图片上传到服务器功能

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

    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实现微信小程序多图片上传到服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • TP5框架实现上传多张图片的方法分析
    • tp5框架基于ajax实现异步删除图片的方法示例
    • 基于ThinkPHP5.0实现图片上传插件
    • ThinkPHP5+Layui实现图片上传加预览功能
    • ThinkPHP5.0 图片上传生成缩略图实例代码说明
    • thinkPHP5框架整合plupload实现图片批量上传功能的方法
    • thinkphp5上传图片及生成缩略图公共方法(分享)
    • thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
    • Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
    • Thinkphp5框架实现图片、音频和视频文件的上传功能详解
    • ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
    • TP5框架实现一次选择多张图片并预览的方法示例
    上一篇:PHP 爬取网页的主要方法
    下一篇:阿里云的WindowsServer2016上部署php+apache
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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