首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

小程序开发

热门: ASP.NET PHP编程 ASP编程 JSP编程

微信小程序上传图片(前端+PHP后端)

来源:未知 发布时间:2018-01-06
一、wxml文件

<text>上传图片</text>
<view>

<button bindtap="uploadimg">点击选择上传图</button>

</view>
<image src='{{source}}' style='width:600rpx; height:600rpx' />

二、js文件

  1. Page({ 
  2.  
  3.   /** 
  4.    * 页面的初始数据 
  5.    */ 
  6.   data: { 
  7.   //初始化为空 
  8.     source:'' 
  9.   }, 
  10.  
  11. /** 
  12.  * 上传图片 
  13.  */ 
  14.   uploadimg:function(){ 
  15.     var that = this
  16.     wx.chooseImage({  //从本地相册选择图片或使用相机拍照 
  17.       count: 1, // 默认9 
  18.       sizeType: ['original''compressed'], // 可以指定是原图还是压缩图,默认二者都有 
  19.       sourceType: ['album''camera'], // 可以指定来源是相册还是相机,默认二者都有 
  20.  
  21.       success:function(res){ 
  22.         //console.log(res) 
  23.        //前台显示 
  24.         that.setData({ 
  25.           source: res.tempFilePaths 
  26.         }) 
  27.  
  28.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
  29.         var tempFilePaths = res.tempFilePaths 
  30.          wx.uploadFile({ 
  31.           url: 'http://www.website.com/home/api/uploadimg'
  32.           filePath: tempFilePaths[0], 
  33.           name: 'file'
  34.           
  35.           success:function(res){ 
  36.             //打印 
  37.             console.log(res.data) 
  38.           } 
  39.         }) 
  40.         
  41.       } 
  42.     }) 
  43.   }, 
  44. )} 

三、PHP后端代码
 

  1. // 上传图片 
  2.     public function uploadimg() 
  3.     { 
  4.          $file = request()->file('file'); 
  5.         if ($file) { 
  6.             $info = $file->move('public/upload/weixin/'); 
  7.             if ($info) { 
  8.                 $file = $info->getSaveName(); 
  9.                 $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file]; 
  10.                 return json($res); 
  11.             } 
  12.         } 
  13.         
  14.     } 
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版