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 相关文章推荐
关于Intype一些小问题的解决办法
Mar 28 PHP
PHP 遍历文件实现代码
May 04 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
Feb 06 PHP
深入解析PHP内存管理之谁动了我的内存
Jun 20 PHP
PHP时间戳 strtotime()使用方法和技巧
Oct 29 PHP
smarty高级特性之对象的使用方法
Dec 25 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
Mar 08 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
Mar 22 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
May 13 PHP
phpstudy默认不支持64位php的解决方法
Feb 20 PHP
php读取本地json文件的实例
Mar 07 PHP
php微信开发之谷歌测距
Jun 14 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框架的性能
2008/01/10 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JS日历 推荐
2006/12/03 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
快速入门Vue
2016/12/19 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
python 调用HBase的简单实例
2016/12/18 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python安装后的目录在哪里
2020/06/21 Python
openCV提取图像中的矩形区域
2020/07/21 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
总经理司机职责
2014/02/02 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android