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

一、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.     }