3***@qq.com
3***@qq.com
  • 发布:2020-02-12 11:07
  • 更新:2020-02-12 11:07
  • 阅读:2810

微信公众号利用JSSDK选择图片并上传的分享

分类:uni-app

uni.chooseImage这个api利用的浏览器本身的能力,基于浏览器本身的规范。在微信浏览器内经常会出现无法选择图片的情况,并且对于多图选择支持很不友好。
对于H5开发很多情况都是在公众号这个场景,因此我们可以利用jssdk里的chooseImage能力来进行实现。

基础设施参考了 这篇文章 谢谢作者的支持。

首要要在jsApiList选项中补充“chooseImage”和“getLocalImgData”。

其余的直接贴代码

chooseImage: async function(data) {  
        if (!this.isWechat()) {  
            return;  
        }  
        if (!data)  
            data = {};  
        if (!data.count)  
            data.count = 9;  
        if (!data.sizeType)  
            data.sizeType = ['original', 'compressed'];  
        if (!data.sourceType)  
            data.sourceType = ['album', 'camera'];  
        var that = this;  
        return new Promise((resolve, reject) => {  
            jweixin.chooseImage({  
                count: data.count,  
                sizeType: data.sizeType,  
                sourceType: data.sourceType,  
                success: async function(res) {  
                    var localDatas = await that.handlerLoacalImgData(res.localIds);  
                    resolve(localDatas)  
                }  
            })  
        })  
    },  
    handlerLoacalImgData: async function(localIds) {  
        var localDatas = new Array();  
        for (let index in localIds) {  
            var item = localIds[index];  
            var localData = await this.getLocalImgData(item);  
            localDatas.push(localData);  
        }  
        return localDatas;  
    },  
    getLocalImgData: function(item) {  
        var isIOS = uni.getSystemInfoSync().platform == 'ios';    
        return new Promise((resolve, reject) => {  
            jweixin.getLocalImgData({  
                localId: item,  
                success: function(res) {  

                    var localData = res.localData;  
                    if (localData.indexOf("base64,") > -1) {  
                        localData = localData.substr(localData.indexOf("base64,") + "base64,".length);  
                    }                                         
                    if (isIOS) {  
                        resolve({  
                            localData: localData,  
                            src: res.localData  
                        })  
                    } else {  
                        resolve({  
                            localData: localData,  
                            src: item  
                        })  
                    }  
                }  
            })  
        })  
    }

localData字段为base64上传的值,src为image显示的值。
localData在Ios和安卓上有不同的处理,具体原因参见 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#17

在上传的时候目前我没有想到可以直传阿里云OSS的方法 因此先用base64绕到服务端再上传到OSS。
如需前端压缩,可自行接入相关插件。提供一个自己在用的 https://github.com/brunobar79/J-I-C/

以上。

0 关注 分享

要回复文章请先登录注册