热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端。下面脚本之家小编给大家带来了tp5实现微信小程序多图片上传到服务器的方法,需要的朋友可以参考下

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

1,小程序端:

在wxml文件中:





删除

点击上传作业

在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 = 9) {
 that.setData({
 imgs: imgs
 });
return false;
 } else {
 imgs.push(tempFilePaths[i]);
 }
 }
// console.log(imgs);
 that.setData({
 imgs: imgs,
 });
//循环把图片上传到服务器
for (var i = 0; i 

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


推荐阅读
author-avatar
prescott1972
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有