zoukankan      html  css  js  c++  java
  • 微信pc端和手机上传处理

    一.原因

      在微信通过电脑版和浏览器登录时,调用了微信上传的接口,wx.getLocalImgData或返回失败。

      没办法,只有处理当电脑上传时,使用ajaxuploadfile上传。

    二.方法

    function upload_weixin_pic(e) {
        e=e||{};
        e={
            id:e.id||'get_pic_url',
            hight:e.hight||0,
            e.width||0,
            chooseImage:function () {
                wx.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
                    sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
                    success: function (res) {
                        e.getLocalImgData(res);
                    }, fail: function () {
                        //layer.alert("选择图片失败", {icon: 2, time: 3000, title: "失败"});
                        openTheFile(e);
                    }, cancel: function (res) {
                    }
                })
            }, getLocalImgData:function (res) {
                layer.msg('上传中', {icon: 16, shade: 0.3, time: 99990000});
                wx.getLocalImgData({
                    localId: res.localIds[0], // 图片的localID
                    success: function (res) {
                        e.getBase64(res);
                    }, fail: function (v) {
                        layer.closeAll();
                        /*if(v.errMsg.indexOf('getLocalImgData')>-1){
                            openTheFile(e);
                        }else{
                            console.info(e);
                            layer.alert("下载图片失败", {icon: 2, time: 3000, title: "失败"});
                        }*/
                        openTheFile(e);
                    }, complete: function (res) {
    
                    }
                });
            }, getBase64:function (res) {
                $.post("/Public/weixin_base64", {base64: res.localData,hight:e.hight,e.width}, function (path) {
                    layer.closeAll();
                    e.success(path);
                })
            }, success:e.success|| function (path) {
                //path
            }
        }
    
        if(isMobile()){
            e.chooseImage();
        }else{
            openTheFile(e);
        }
    }
    var previewImages_e={};
    function openTheFile(e) {
        if($("#"+e.id).length == 0){
            var input=$('<input type="file" style="display: none" name="'+e.id+'" id="'+e.id+'" >');
            input.attr("onchange",'previewImages()');
            $("body").append(input);
        }
        previewImages_e=e;
        $("#"+e.id).click();
    }
    function previewImages() {
        var e=previewImages_e||{};
        var lay = layer.msg('上传中', {icon: 16, shade: 0.3, time: 99990000});
        $.ajaxFileUpload({
            url: "/Public/UploadPic",
            secureuri: false,
            fileElementId: e.id,
            type: "post",
            data:{
                hight:e.hight,
                e.width
            },
            dataType: "json",
            async: false,
            success: function (data, status) {
                layer.close(lay)
                if (data.code == 0) {
                    e.success(data.url)
                } else {
                    layer.alert(data.msg, {icon: 2})
                }
            },
            error: function (data, status, e) {
                layer.close(lay);
                console.info(e)
                layer.alert("上传图片异常,请选择新的图片!")
            }
        })
    }

    三.调用方法

      这个方法我使用了layui、ajaxfileupload插件

      调用时

      可以直接调用方法名

    upload_weixin_pic()

    //也可以

          upload_weixin_pic({
                    success:function (path) {
                        //path
                    }
                })
  • 相关阅读:
    如何给博客园添加背景canvas线条动画背景
    过去-现在-未来
    如何将图片转化为代码图片
    css3炫酷登录页面
    图片跟随鼠标移动特效
    css3实现鼠标移入图片特效
    在线上传图片获取url
    《程序员修炼之道:从小工到专家》读后感01
    动手动脑-随机数和重载
    JAVA学习第三周
  • 原文地址:https://www.cnblogs.com/yzssoft/p/9940082.html
Copyright © 2011-2022 走看看