php微信小程序多图上传,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 < 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微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能相关推荐
- uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器(H5上传-微信小程序上传)
前言 最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
- python3识别图中的文字_Python3.x:如何识别图片上的文字
Python3.x:如何识别图片上的文字 安装pytesseract库,必须先安装其依赖的PIL及tesseract-ocr,其中PIL为图像处理库,而后面的tesseract-ocr则为google ...
- MdEditor-v3中上传照片的前后端对接(图片上传至又拍云云储存)
MdEditor-v3中上传照片的前后端对接(图片上传至又拍云云储存) 使用springboot+MdEditor-v3+又拍云实现markdown的图片上传功能 需要有一定的springboot和v ...
- java图片上传并解析,详解SpringMVC实现图片上传以及该注意的小细节
本篇文章主要介绍了详解SpringMVC实现图片上传以及该注意的小细节,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 先附上图片上传的代码 jsp代码如下: ![](${path}/mall/i ...
- Gitee+typora+picgo+插件,markdown图床配置,一键将markdown中本地图片上传至图床
一键将markdown中本地图片上传至图床 推荐配置:Gitee+typora+picgo+插件 文章目录 安装 picgo 配置 typora 配置 Gitee 图床 配置图床设置 配置 typor ...
- java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
- $_post 数据上传到那个位置_如何实现图片上传并保存到数据库?
(给Web前端雪儿加星标,提升前端技能) 之前写过图片上传的案例,但是时间一长就忘了,这次写的这个程序用到了图片的上传,并且能够图文显示,所以写了这篇文章来记录一下.由于人们的生活质量的提高及网络的发 ...
- php上传同一张图片,两种php实现图片上传的方法_PHP
图片上传在项目中经常用到,几乎没有任何一个项目可以脱离图片或者是文件上传.本篇我在这向大家介绍两种常规的上传方式.(注:在这里我们仅仅是对功能的实现,不去做过多的前端的样式) 一.利用form表单上传 ...
- weui上传文件完整例子php,weui实现图片上传
您现在的位置是:网站首页>>前端技术>>weui weui实现图片上传 发布时间:2019-04-30 16:37:17作者:wangjian浏览量:1657点赞量:0 在we ...
最新文章
- 给按钮添加热键和快捷键
- spring in action 读书笔记
- net core 获取网站目录
- 计算机视觉-自定义对象检测器
- Seaborn——绘制统计图形
- VC++中Format用法
- New module changes in Go 1.16
- oracle 静默 建库,静默安装Oracle 11gR2软件并且手动建库
- Compass的误解与新发现
- Appium 控件定位链接整理(appiumdriver)
- VMware虚拟机中的CentOS7安装Nginx后本机无法访问的解决办法
- 实对称矩阵的特征向量矩阵为酉矩阵
- 笔记本W10找不到端口(com口)及单片机串口连接的问题(附51开发板的CH340串口芯片的驱动程序安装包)
- ByteBuffer详解(大概2333)
- 苹果怎么测是原装屏_Wendy在华强北教你组装苹果8P——屏幕
- 白盒/黑盒/灰盒测试的区别
- JAVA(一)依赖注入的简单理解
- CSS如何写出圆圈1(详细)
- win10关闭windows聚焦_Windows 10聚焦怎么用?教你玩转Windows聚焦功能
- 为什么邮件发的邮箱会进垃圾箱?企业邮箱进垃圾箱有什么处理方法?
热门文章
- spring学习(10):创建项目(自动装配)
- 第四十四期:1.3万亿条数据查询如何做到毫秒级响应?
- db2存储结构换Oracle,DB2中实现Oracle的功能
- mysql中 课程1比课程2成绩高_小菜菜mysql练习解读分析1——查询 01 课程比 02 课程成绩高的学生的信息及课程分数...
- 手机端双击页面放大的问题
- python 合并excel 自动更新_手把手教你4种方法用Python批量实现多Excel多Sheet合并
- golang 读取文件最后一行_测试用例是开发人员最后一块遮羞布
- python装饰器带参数函数_当我使用带参数的python装饰器时,如何将参数传递给最内部的函数?...
- javascript与php与python的函数写法区别与联系
- POJ 3087 Shuffle'm Up (模拟+map)