下面将为您详细讲解“微信端调取相册和摄像头功能，实现图片上传，并上传到服务器”的完整攻略。
1. 确定文件上传API接口
在开始进行文件上传操作之前，需要确认已经有可用的API接口供前端调用，该API接口能够接收前端发送过来的图片文件并保存到服务器指定的位置。API接口可以使用PHP、Java、Python等任何服务器端语言实现，这里以PHP为例。
<?php
$uploadPath = "./uploads/"; // 文件上传路径
$file = $_FILES['file']; // 获取上传的文件
// 定义要保存的文件名
$fileName = md5(uniqid()) . "." . end(explode(".", $file['name']));
// 将上传的文件保存到指定位置
move_uploaded_file($file['tmp_name'], $uploadPath . $fileName);
// 返回文件名和访问地址
$result = array(
"fileName" => $fileName,
"url" => "http://www.example.com/uploads/" . $fileName
);
echo json_encode($result);
?>
2. 调用微信JS-SDK提供的API
在页面中使用微信JS-SDK提供的API，让用户可以方便地使用摄像头或相册上传图片。用户上传的图片可以通过AJAX请求发送到前面所确定的API接口上进行保存。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信端调取相册和摄像头功能，实现图片上传</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<button id="chooseImage">选择图片</button>
<script>
// 在页面加载完成后调用微信JS-SDK提供的API
wx.ready(function () {
// 微信选择图片并上传
$('#chooseImage').click(function () {
wx.chooseImage({
count: 1, // 最多选择1个文件
sizeType: ['compressed'], // 只压缩选中的图片
sourceType: ['album', 'camera'], // 可以从相册或拍照选择图片
success: function (res) {
// 取得选择的文件
var localIds = res.localIds;
// 获得图片的base64编码
wx.getLocalImgData({
localId: localIds[0],
success: function (res) {
var localData = res.localData;
// 检查图片是否已经有data:前缀
if (localData.indexOf('data:image') !== 0) {
localData = 'data:image/jpeg;base64,' + localData;
}
// 调用上传图片方法
uploadImg(localData);
}
});
}
});
});
});
// 上传图片方法
function uploadImg(localData) {
// 将图片的base64编码转成Blob对象
var blob = dataURLtoBlob(localData);
// 创建FormData
var formData = new FormData();
// 添加文件到formData中
formData.append('file', blob);
// 发送AJAX请求上传文件
$.ajax({
url: 'http://example.com/upload.php', // 上传API接口地址
type: 'POST',
contentType: false,
processData: false,
data: formData,
success: function (result) {
console.log(result);
}
});
}
// 将base64编码的图片转成Blob对象
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
}
</script>
</body>
</html>
示例1：我们连接一个后端PHP服务器，使用PHP将上传的文件保存到指定目录之中，server.php部分代码如下：
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_FILES['file']) {
$file = $_FILES['file'];
$fileName = md5(uniqid()) . "." . end(explode(".", $file['name']));
$path = './images/';
move_uploaded_file($file['tmp_name'], $path . $fileName);
$url = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['SCRIPT_NAME']).'/images/'.$fileName;
echo json_encode(array(
'status' => 0,
'msg' => '上传成功！',
'url' => $url,
));
return;
} else {
echo json_encode(array(
'status' => -1,
'msg' => '上传失败！'
));
}
}
示例2：我们连接一个后端Python服务器，使用Python将上传的文件保存到指定目录之中，server.py部分代码如下：
import os
import tornado.ioloop
import tornado.web
class UploadHandler(tornado.web.RequestHandler):
def post(self):
file_metas = self.request.files['file'] # 获取上传文件信息/file是form中对应的name
for meta in file_metas:
filename = meta['filename']
file_path = './images/' + filename
with open(file_path, 'wb') as up:
up.write(meta['body'])
url = 'http://'+self.request.host+'/images/'+filename
self.write({
'status': 0,
'msg': '上传成功！',
'url': url,
})
if __name__ == "__main__":
app = tornado.web.Application(handlers=[(r'/upload', UploadHandler)])
app.listen(80)
tornado.ioloop.IOLoop.instance().start()
经过如上处理后，formData.append('file', blob); 代码就可以发送二进制数据到服务器端，在Python下，可以直接使用 meta['body']获取到二进制数据，然后打开文件写入即完成文件上传操作。
以上就是关于“微信端调取相册和摄像头功能，实现图片上传，并上传到服务器”的完整攻略，以上代码仅作为示例供参考。
本文链接：https://my.lmcjl.com/post/14386.html
展开阅读全文
4 评论