微信js上传图片demo

微信JS上传图片的Demo主要涉及到微信提供的JS-SDK功能，以下是基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

微信JS-SDK是微信公众平台提供的一套基于微信内的网页开发工具包。通过使用JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

优势

便捷性：用户可以直接在微信内完成图片上传，无需跳转至其他应用。
安全性：通过微信的认证机制，确保上传过程的安全性。
兼容性：适配多种移动设备和浏览器，提供一致的用户体验。

类型

基础上传：简单的图片上传功能。
带参数上传：上传时附带额外信息，如用户ID、时间戳等。
图片处理：上传后进行图片压缩、裁剪等处理。

应用场景

社交应用：用户头像上传、朋友圈图片分享。
电商网站：商品图片上传、用户晒单。
新闻资讯：读者评论配图上传。

示例代码（基础上传）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>微信JS上传图片Demo</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <button id="uploadBtn">上传图片</button>
    <script>
        wx.config({
            debug: false, // 开启调试模式
            appId: 'yourAppId', // 必填，公众号的唯一标识
            timestamp: 'yourTimestamp', // 必填，生成签名的时间戳
            nonceStr: 'yourNonceStr', // 必填，生成签名的随机串
            signature: 'yourSignature',// 必填，签名
            jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
        });

        document.getElementById('uploadBtn').onclick = function() {
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    wx.uploadImage({
                        localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            console.log('上传成功，serverId:', serverId);
                        },
                        fail: function(res) {
                            console.error('上传失败:', res);
                        }
                    });
                }
            });
        };
    </script>
</body>
</html>