微信pc端和手机上传处理

一.原因

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

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

二.方法

function upload_weixin_pic(e) {
    e=e||{};
    e={
        id:e.id||‘get_pic_url‘,
        hight:e.hight||0,
        width: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,width: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,
            width: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
                }
            })

原文地址:https://www.cnblogs.com/yzssoft/p/9940082.html

时间: 2024-11-02 23:36:24

微信pc端和手机上传处理的相关文章

解决ios手机上传竖拍照片旋转90度的问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 这里主要利用exif.js读取照片的拍摄信息. Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向.相机设备型号.拍摄时间.ISO 感光度.GPS 地理位置等数据. EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧!

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多图上传,所以今天我们来一起撸一下,怎么去思考这个实现逻辑! 这里我想到的思路是比较简单的,首先,我们有一个按钮,按钮是上传图片,点击之后弹出某个界面进行图片的选择,一般是九张图片或者十二张,选完之后就直接上传了,大致的流程应该是这个样子,那我们首先来写个按钮 activity_main.xml <?

利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针9

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

微信应用号小程序上传wx.uploadFile(OBJECT)

微信应用号小程序上传wx.uploadFile(OBJECT) wx.uploadFile(OBJECT) ? 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器.客户端发起一个HTTPS POST请求,其中 Content-Type 为 multipart/form-data . OBJECT参数说明: 参数 类型 必填 说明 url String 是 开发者服务器url filePath S

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

移动端web头像上传实现截取和照片方向修复

实战所需js包: jQuery.Jcrop.EXIF 本次实战功能是在 app 中的 我的客户 的客户信息页面中实现移动端web的头像上传,本次没有实现图像拖拽.缩放的触摸事件功能(Jcrop在这方面的扩展支持实在不够良好,弄了半天没弄出来),若后续有更好的移动端web头像上传插件,可考虑后续替代升级. demo主要实现的关键功能: 图像的方向修正及图像截取 虽然没有实现图像拖拽和双指缩放,但其缩放后的相对于图像的比例计算和拖拽坐标计算规则是一致的,可以参考.同时图像的旋转功能也可参考其中的核心

转:微信公众平台开发(80) 上传下载多媒体文件

微信公众平台开发(80) 上传下载多媒体文件 微信公众账号在回复图片.语音.视频的时候,将使用media_id来调用相关文件,很多朋友咨询这个如何开发实现.本文将介绍在微信公众平台开发过程中,如何上传下载多媒体文件. 一.上传多媒体文件 公众号可调用本接口来上传图片.语音.视频等文件到微信服务器,上传后服务器会返回对应的media_id,公众号此后可根据该media_id来获取多媒体.请注意,media_id是可复用的,调用该接口需http协议. 通常,文件上传是通过html表单进行的,但通过C

Java企业微信开发_08_JSSDK多图上传

一.本节要点 1.1可信域名 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),可在企业微信的管理后台“我的应用”里设置应用可信域名.这个域名必须要通过ICP备案,不然jssdk会配置失败 1.2JS-SDK使用权限签名算法 1.2.1 签名生成规则如下: (1)参与签名的字段包括: noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) . (2)对所有待签名参数按照字段名的ASCII