微信小程序实现图片上传功能实例(前端+PHP后端)


Posted in Javascript onJanuary 10, 2018

前言

几乎每个程序都需要用到图片。下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

方法如下:

一、wxml文件

<text>上传图片</text>
<view>
<button bindtap="uploadimg">点击选择上传图</button>
</view>
<image src='{{source}}' style='width:600rpx; height:600rpx' />

二、js文件

Page({
 /**
 * 页面的初始数据
 */
 data: {//初始化为空
 source:''
 },
/**
 * 上传图片
 */
 uploadimg:function(){
 var that = this;
 wx.chooseImage({ //从本地相册选择图片或使用相机拍照
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success:function(res){
  //console.log(res)
  //前台显示
  that.setData({
   source: res.tempFilePaths
  })
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths
   wx.uploadFile({
   url: 'http://www.website.com/home/api/uploadimg',
   filePath: tempFilePaths[0],
   name: 'file',
   
   success:function(res){
   //打印
   console.log(res.data)
   }
  })
  
  }
 })
 },)}

三、PHP后端代码

// 上传图片
 public function uploadimg()
 {
   $file = request()->file('file');
  if ($file) {
   $info = $file->move('public/upload/weixin/');
   if ($info) {
    $file = $info->getSaveName();
    $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file];
    return json($res);
   }
  }  
 }

运行结果:

微信小程序实现图片上传功能实例(前端+PHP后端)

console打印结果:

微信小程序实现图片上传功能实例(前端+PHP后端)

此时表示上传成功!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
DOM 事件流详解
Jan 20 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 #Javascript
React中常见的动画实现的几种方式
Jan 10 #Javascript
使用async-validator编写Form组件的方法
Jan 10 #Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 #Javascript
JavaScript实现快速排序的方法分析
Jan 10 #Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
js推箱子小游戏步骤代码解析
Jan 10 #Javascript
You might like
php调用google接口生成二维码示例
2014/04/28 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python脚本后台执行方式
2019/12/21 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Django多个app urls配置代码实例
2020/11/26 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
室内设计专业个人的自我评价
2013/10/19 职场文书
前台文员的岗位职责
2013/11/14 职场文书
心理健康教育制度
2014/01/27 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
三八妇女节活动总结
2014/05/04 职场文书
社区服务活动小结
2014/07/08 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
红楼梦读书笔记
2015/06/25 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
小学英语课教学反思
2016/02/15 职场文书
mysqldump进行数据备份详解
2022/07/15 MySQL