微信端调取相册和摄像头功能，实现图片上传，并上传到服务器

下面将为您详细讲解“微信端调取相册和摄像头功能，实现图片上传，并上传到服务器”的完整攻略。

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']获取到二进制数据，然后打开文件写入即完成文件上传操作。

以上就是关于“微信端调取相册和摄像头功能，实现图片上传，并上传到服务器”的完整攻略，以上代码仅作为示例供参考。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：微信端调取相册和摄像头功能，实现图片上传，并上传到服务器 - Python技术站