调用wxsdk上传图片遇到的那些坑

按照wxsdk官方文档一顿撸代码之后，wxsdk得到的图片内容是图片的base64码，这时候就需要对base64码进行打包，转化成图片文件才能上传，话不多说，直接贴代码：

convertBase64UrlToBlob ( imgData ) {
    var bytes=window.atob (imgData.split(',')[1]);        //去掉url的头，并转换为byte（一般认为url头带有data:image/jpeg;base64,此处二进制转化要转化头部后面的信息）
　　//处理异常,将ascii码小于0的转换为大于0

    var ab = new ArrayBuffer ( bytes.length );
    var ia = new Uint8Array ( ab );
    for ( var i = 0 ; i < bytes.length ; i++ ) {
        ia[ i ] = bytes.charCodeAt ( i );
    }
    var blob=new Blob ( [ ab ] , { type : 'image/jpeg' } );
    return blob;
}

var formData = new FormData (  );
formData.append ( "upload" , this.convertBase64UrlToBlob ( imgData ),'headImg.jpeg' );  //请求传送数据的时候，要求图片信息打包到formData 中才能做入参

由于博主用安卓手机，而且调用wxsdk获取微信签名的时候，要求域名不能含有端口等等毛病说法，所以本地链接无法测试，只能通过上传服务器测试，此时上传报错，通过后台日志发现，并没有上传图片的信息，安装

vconsole.min.js，控制台打印发现传入的imgData是不带有data:image/jpeg;base64,头的，于是修改方法为

convertBase64UrlToBlob ( imgData ) {
    var bytes=window.atob (imgData);        
　　//处理异常,将ascii码小于0的转换为大于0

    var ab = new ArrayBuffer ( bytes.length );
    var ia = new Uint8Array ( ab );
    for ( var i = 0 ; i < bytes.length ; i++ ) {
        ia[ i ] = bytes.charCodeAt ( i );
    }
    var blob=new Blob ( [ ab ] , { type : 'image/jpeg' } );
    return blob;
}
安卓手机测试通过，但是ios系统测试无法通过，报错window.atob ，博主认为是window.atob在ios和安卓不兼容的问题，于是查找兼容方法，但是无果，
后来又是通过vconsole.min.js工具打印，发现ios打印出的imgData是含有data:image/jpeg;base64,头的，（这个坑不容易发现啊）
于是改代码为

convertBase64UrlToBlob ( imgData ) {
    var bytes=null;
    if(imgData.split(',').length==2){
        bytes=window.atob (imgData.split(',')[1]);        //去掉url的头，并转换为byte
    }else{
        bytes=window.atob (imgData);        //去掉url的头，并转换为byte
    }
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer ( bytes.length );
    var ia = new Uint8Array ( ab );
    for ( var i = 0 ; i < bytes.length ; i++ ) {
        ia[ i ] = bytes.charCodeAt ( i );
    }
    var blob=new Blob ( [ ab ] , { type : 'image/jpeg' } );
    return blob;
},

转载于:https://www.cnblogs.com/dayongmengmengda/p/9447072.html