上传图片微信公众号js-sdk和WEUI两种方式

最新推荐文章于 2022-05-15 14:56:35 发布

琨羽

最新推荐文章于 2022-05-15 14:56:35 发布

阅读量503

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44075408/article/details/116329989

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

微信公众号js-sdk上传图片

接口说明可以参考微信公众号开放文档
效果图如下：
wx js-sdk实现图
代码如下：
需要的js：

<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<img id="img0" width="300px" height="300px">
<img id="img1" width="60px" height="60px">
<img id="img2" width="60px" height="60px">
<input type="button" onclick="getWxChooseImage()" value="上传图片">
<input type="button" onclick="upload()" value="提交">

getWxJSSDK()
var imgArray=new Array()
//获取微信sdkConfig
    function getWxJSSDK(){
        // 拿到当前页面url
        var thisPageUrl = location.href;
        $.ajax({
            url: "url",
            type: "post",
            dataType: "json",
            data: {
                "url": thisPageUrl,
            },
            success: function (result) {
                wx.config({
                    debug: false, 
                    appId: result.appId,
                    timestamp: result.timestamp,
                    nonceStr: result.nonceStr,
                    signature: result.signature,
                    jsApiList: ['openLocation', 'getLocation','chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage' ]
                });
            },
            error: function (err) {
                console.log("fail");
            }
        });
    }
    function getWxChooseImage(){
        wx.chooseImage({
            count: 3, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                console.log(res)
                console.log(res.localIds.length)
                for (let i = 0; i < res.localIds.length; i++) {
                 // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    var localIds = res.localIds[i]; 
                    wx.getLocalImgData({
                        localId: localIds, // 图片的localID
                        success: function (res) {
                        // localData是图片的base64数据，可以用img标签显示
                            var localData = res.localData; 
                            $("#img"+i).attr("src",localData)
                            imgArray[i]=localData;
                        }
                    });
                }

            }
        });
    }

上面是用数组保存了图片的base64数据，这里有个坑，用微信开发者工具测试的可以显示出图片，用手机测试就显示不出照片，需要修改一下上面的代码，如下：

$("#img"+i).attr("src","data:image/jpg;base64,"+localData)

然后就是将数据发送给后台，用ajax得加个字段traditional=true,如下：

$.ajax({
            url: "url",
            type: "POST",
            traditional:true,
            async: true,
            dataType: "text",
            data: {
                imgArray:imgArray
            },
            success: function (data) {
                
            }
        });

weui上传图片

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../../css/weui.css"/>
    <link rel="stylesheet" href="../../css/weuix.css"/>
    <script src="../../js/zepto.min.js"></script>
    <script src="../../js/zepto.weui.js"></script>
    <script>
        $(function(){
            var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
            var $uploaderInput = $("#uploaderInput"); //上传按钮+
            var $uploaderFiles = $("#uploaderFiles");    //图片列表
            var $galleryImg = $(".weui-gallery__img");//相册图片地址
            var $gallery = $(".weui-gallery");
            $uploaderInput.on("change", function(e){
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];

                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }
                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
            });
            $uploaderFiles.on("click", "li", function(){
                $galleryImg.attr("style", this.getAttribute("style"));
                console.log(this)
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function(){
                $gallery.fadeOut(100);
            });
        });
    </script>
</head>
<body ontouchstart>
<div class="page-hd">
    <h1 class="page-hd-title">
        图片上传和预览压缩
    </h1>
    <p class="page-hd-desc">需要加载lrz.min.js压缩插件</p>
</div>
<div class="page-bd-15">
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">图片预览</p>
            <div class="weui-uploader__info">0/2</div>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(../../img/add.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(../../img/add.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(../../img/add.png)"></li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../../img/add.png)">
                    <div class="weui-uploader__file-content">
                        <i class="weui-icon-warn"></i>
                    </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../../img/add.png)">
                    <div class="weui-uploader__file-content">50%</div>
                </li>
            </ul>
            <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">
            </div>
        </div>
    </div>

    <div class="weui-gallery" style="display: none">
        <span class="weui-gallery__img"></span>
        <div class="weui-gallery__opr">
        </div>
    </div>
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">单图上传,非压缩,通过POST上传</p>
            <div class="weui-uploader__info">0/2</div>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files">
            </ul>
            <div class="weui-uploader__input-box">
                <input class="weui-uploader__input" accept="image/*" multiple="" type="file"  onchange="previewImage(this)">
            </div>
        </div>
        <script>
            function previewImage(file) {
                var MAXWIDTH = 1000;
                var MAXHEIGHT = 1200;
                if (file.files && file.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        console.log(evt.target.result)
                        $.post("url",{imgbase64: evt.target.result},function(rs){
                            $(file).parent().prev().html('<li  οnclick="removeimg(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')"></li>');
                        },'json');
                    };
                    reader.readAsDataURL(file.files[0]);
                    console.log(file.files[0]);
                }
            }
        </script>
    </div>
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">多图上传,非压缩,使用POST上传</p>
            <div class="weui-uploader__info">0/2</div>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files">

            </ul>
            <div class="weui-uploader__input-box">
                <input class="weui-uploader__input" accept="image/*" multiple="" type="file" onchange="previewImages(this)">
            </div>
        </div>
        <script>
            function removeimg(obj){
                $.confirm('您确定要删除吗?', '确认删除?', function() {$(obj).remove();});
                return false;
            }
            function previewImages(file) {
                var MAXWIDTH = 1000;
                var MAXHEIGHT = 1200;
                for (var i = 0; i < file.files.length; i++) {

                    if (file.files && file.files[i]) {
                        var reader = new FileReader();
                        reader.onload = function (evt) {
                            console.log(evt.target.result)
                            $.post("url",{imgbase64: evt.target.result},function(rs){
                                $(file).parent().prev().append('<li  οnclick="removeimg(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')"></li>');
                            },'json');
                        };
                        reader.readAsDataURL(file.files[i]);
                        console.log(file.files[i]);
                    }

                }
            }
        </script>
    </div>
</div>
<br>
<br>
</body>
</html>

weui这个是官网的例子，代码中post请求时imgbase64: evt.target.result这个就是图片base64数据，示例中是直接就上传了，也可以用wx js-sdk的方式，先存储图片数据，再用ajax发送。效果图：
weui-实现图
weui选择图片的删除是单击图片弹出提示删除，预览的图片是单击放大图片，关于放大和删除还没研究，wx js-sdk删除是需要图片覆盖之前的，后续再优化吧，现在记录下遇到的坑

琨羽

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
上传图片微信公众号js-sdk和WEUI两种方式

微信公众号js-sdk上传图片接口说明可以参考微信公众号开放文档效果图如下：代码如下：需要的js：<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><img id="img0" width="300px
复制链接

扫一扫

专栏目录