微信小程序实现图片上传功能实例(前端+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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 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 采集程序原理分析篇
2010/03/05 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php源码的安装方法和实例
2019/09/26 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
js实现登录与注册界面
2017/11/01 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Python正则表达式经典入门教程
2017/05/22 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
留学推荐信范文
2014/05/10 职场文书
实验心得体会
2014/09/05 职场文书
个人作风建设自查报告
2014/10/22 职场文书
暑期社会实践证明书
2014/11/17 职场文书
班主任寄语2015
2015/02/26 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书