在微信小程序中实现服务器图片上传和下载的案例效果如下:
要具体实现照片上传和下载功能,需要环境准备和具体开发。
环境准备包括如下内容:
1.小程序的appid,在微信公众平台注册即可。
2.服务器的搭建,大家可以选择自己的服务器环境。本案例使用新浪云的sae平台,标准环境免费,直接用新浪微博号登陆注册即可。注册成功后,点击新浪云控制台菜单中的云应用SAE,在应用管理下点击创建新应用,建立服务器环境。效果如下图所示:
3.在小程序后台配置服务器,在设置>开发设置中,本文配置新浪云的域名相关参数,效果如下图所示:
具体开发步骤是:
通过绑定的函数upLoadImg()实现图片上传的开始,通过绑定的函数downLoadImg()实现图片下载的开始。在函数upLoadImg中,首先通过wx.chooseImage获取图片的路径,然后通过wx.uploadFile具体实现图片上传。在函数downLoadImg中,通过wx.downloadFile具体实现图片下载。
相关文件如下:
index.wxml的代码如下:
<view>
<button bindtap="upLoadImg">上传图片</button>
<image src='{{imgUrl}}'></image>
<button bindtap="downLoadImg">下载图片</button>
</view>
Index.js的代码如下:
Page({
data: {
imgUrl: ""
},
upLoadImg: function () {
(1);
var that = this;
wx.chooseImage({
count: 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths;
/*
({
imgUrl: tempFilePaths[0]
})
con(tempFilePaths);
*/
//上传图片
wx.uploadFile({
url: ';, //此处为新浪云的域名,u是上传到服务器端自定义的后台php文件
filePath: tempFilePaths[0],
name: 'file1',
success: function (res) {
var data = res.data;
con(data);
},
fail: function () {
con('上传失败')
}
})
//上传图片结束
}
});
},
//下载图片
downLoadImg: function () {
var that=this;
wx.downloadFile({
url: ' ;, //此处为新浪云的域名,bg1.jpg是服务器上要下载的图片
success: function (res) {
);
({
imgUrl:res.tempFilePath
})
}
})
}
})
上传到服务器端u的代码如下:
<?php
//sae存储文件的方法
$s=new SaeStorage();
ob_start();
readfile($_FILES['file1']['tmp_name']);
$img=ob_get_contents();
ob_end_clean();
//获取文件大小
// $size=strlen($img);
file_put_contents(SAE_TMP_PATH.";,$img);
if($s->upload("test",";,SAE_TMP_PATH.";)){
echo "上传成功";
}else{
echo "上传失败";
}
?>
说明:在新浪云“管理应用”中,点击左边导航菜单“存储与CDN服务”>“Storage”,可以查看上传的图片。点击左边导航菜单“应用”>“代码管理”,可以进行代码的上传和编辑。