配置好新浪云服务器后,接下来我们就写一个上传图片的功能来演示如何与服务器交互开发
首先创建一个干净的微信小程序项目
然后在index.wxml文件里写入:
<button bindtap=\'uploadimg\'>上传图片</button>
<image src=\'{{imgSrc}}\'></image>
在index.js里写入:
Page({ data:{ imgSrc:"" }, uploadimg:function(){ var that = this; wx.chooseImage({ success: function (res) { var tempFilePaths = res.tempFilePaths; that.setData({ imgSrc: tempFilePaths[0] }); console.log(tempFilePaths); } }) } })
通过上面的代码我们先测试看看能不能取到本地图片
运行代码可以看到,可以正常显示图片
接下来就是写php服务器文件了
首先新建一个upload_handle.php文件在index目录下,然后里面代码如下:
<?php //sae存储文件的方法 $s = new SaeStorage(); ob_start(); readfile($_FILES[\'fileup\'][\'tmp_name\']); $img = ob_get_contents(); ob_end_clean(); //获取文件大小 $size = strlen($img); file_put_contents(SAE_TMP_PATH."/bg.jpg",$img); if($s->upload("test","test.jpg",SAE_TMP_PATH."/bg.jpg")){ echo "上传成功"; }else{ echo "上传失败"; } ?>
将这个文件打包成压缩文件然后上传到创建好的云仓库(新浪云版本库)
不用你解压,服务器会自动解压获取php文件。
下面再修改一下uploadimg方法:
uploadimg:function(){ var that = this; wx.chooseImage({ success: function (res) { var tempFilePaths = res.tempFilePaths; // that.setData({ // imgSrc: tempFilePaths[0] // }); // console.log(tempFilePaths); wx.uploadFile({ url: \'https://example001.applinzi.com/upload_handle.php\',//这里放上你自己的二级域名地址 filePath: tempFilePaths[0], name: \'fileup\', success:function(res){ var data = res.data; console.log(data); }, fail:function(){ console.log(\'fail\'); } }) } }) },
忘了提一点,还要配置一个存放上传文件的仓库storage的Bucket
然后重新运行程序,点击上传图片,可以看到控制台输出上传成功信息,然后去到Bucket里的test库可以看到图片已经上传上去了