微信小程序实现图片上传功能实例(前端+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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
JScript实现地址选择功能
Aug 15 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue路由跳转传参数的方法
May 06 Javascript
vue实现倒计时获取验证码效果
Apr 17 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP使用递归生成文章树
2015/04/21 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
vue 组件简介
2020/07/31 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python编写一个闹钟功能
2017/07/11 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
树莓派实现移动拍照
2019/06/22 Python
django和vue实现数据交互的方法
2019/08/21 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
wxPython实现画图板
2020/08/27 Python
python numpy 反转 reverse示例
2019/12/04 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python 6行代码制作月历生成器
2020/09/18 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
Oracle使用别名的好处
2022/04/19 Oracle