微信小程序实现图片上传功能实例(前端+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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js实现不重复导入的方法
Mar 02 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
layui的table中显示图片方法
Aug 17 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 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 命令行参数详解及应用
2011/05/18 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP中soap的用法实例
2014/10/24 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
js实现圆盘记速表
2015/08/03 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
电钳专业个人求职信
2014/01/04 职场文书
消防安全责任书
2014/04/14 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
销售人员工作自我评价
2014/09/21 职场文书
总经理致辞
2015/07/29 职场文书
诚信教育主题班会
2015/08/13 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
改造DE1103三步曲
2022/04/07 无线电