您的位置 首页 > 数码极客

【微信动态图片怎么下载】技术分享:微信小程序实现服务器图片上传和下载

在微信小程序中实现服务器图片上传和下载的案例效果如下:

要具体实现照片上传和下载功能,需要环境准备和具体开发。

环境准备包括如下内容:

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”,可以查看上传的图片。点击左边导航菜单“应用”>“代码管理”,可以进行代码的上传和编辑。

关于作者: admin

无忧经验小编鲁达,内容侵删请Email至wohenlihai#qq.com(#改为@)

热门推荐