发布：2023/4/4 16:38:53作者：管理员 来源：本站 浏览次数：1102

公司公众号项目，之前是使用Vant框架 构建。一期的时候上传图片使用Vant提供 的Uploader组件，当时没有提到要为客户提供多图上传这个功能，且测试的小姐姐当初的iphone很给力 ，几乎没什么问题。

一期上线，二期优化来了。重点是要提供多图上传，奔溃的是ios端Uploader组件还是一如既往的很给力，然到了安卓手机上，完全不起作用。尝试了网友说得将multiple 放到末尾并且赋值 ，但是并不能唤起安卓的多图选择。

   <van-uploader :before-read="beforeRead" :after-read="afterRead" :before-delete="deletImg"

    :max-count="maxSize" v-model="fileList" multiple >

       <van-icon name="plus" />

   </van-uploader>

   设置成

   <van-uploader :before-read="beforeRead" :after-read="afterRead" :before-delete="deletImg"

    :max-count="maxSize" v-model="fileList" :multiple="true">

    <van-icon name="plus" />

   </van-uploader>

此时才发现 Vant官网Uploader的坑（部分安卓不支持，笑哭~），希望下个版本可以支持

只能改组件了，此时想到了微信原生的chooseImage

微信针对图片封装了一系列的方法chooseImage、previewImage、uploadImage、downloadImage、getLocalImgData，微信开发文档链接：微信上传文档

   //拍照或从手机相册中选图接口

   wx.chooseImage({

     count: 1, // 默认9

     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

     success: function (res) {

     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

     }

   });

   //预览图片

   wx.previewImage({

     current: '', // 当前显示图片的http链接

     urls: [] // 需要预览的图片http链接列表

   });

   //图片上传，上传到微信的服务器

   wx.uploadImage({

     localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得

     isShowProgressTips: 1, // 默认为1，显示进度提示

     success: function (res) {

       var serverId = res.serverId; // 返回图片的服务器端ID

     }

   })

   //下载图片

   wx.downloadImage({

     serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得

     isShowProgressTips: 1, // 默认为1，显示进度提示

     success: function (res) {

       var localId = res.localId; // 返回图片下载后的本地ID

     }

   });

   //获取本地图片

   wx.getLocalImgData({

     localId: '', // 图片的localID

     success: function (res) {

       var localData = res.localData; // localData是图片的base64数据，可以用img标签显示

     }

   });

1、我将用到的微信上传方法封装成为一个文件，在开发中首先要引入微信的JSSDK文件，然后注册所需要的jsApi。注册时要调用后端的接口生成签名数据

   init(params,number,callback){

       let config = null;

    getWxSign(params).then(res =>{

    if(res.code == 200){

    config = wxSign({ticket:res.content.ticket,appId:res.content.appid})

    wx.config({

     debug: false, // 开启调试模式

     appId: config.appId, //公众号的唯一标识

     timestamp: config.timestamp, //生成签名的时间戳

     nonceStr: config.nonceStr, //生成签名的随机串

     signature: config.signature, //签名

     jsApiList: ['chooseImage','uploadImage', 'downloadImage','getLocalImgData'], // 使用的JS接口列表

    });

    wx.ready(function(){

    wxUpload.chooseImage(number, callback);

    })

    }

    }).catch(error => {

    Toast(error);

    })

   },

2、然后调用微信选择照片的方法，唤起微信拍照(从相册选取)功能

   chooseImage(number, callback){

    wx.checkJsApi({

    jsApiList: ['chooseImage'],

    success: function(res) {

    if(res.checkResult.chooseImage){

    wx.chooseImage({

    count: number,

    sizeType: ['original', 'compressed'], //是原图还是压缩图，默认二者都有

    sourceType: ['album', 'camera'], //来源是相册还是相机，默认二者都有

    success: function(res){

    Toast.loading({

    message: "加载中...",

    duration: 0,

    forbidClick: true

    })

    wxUpload.readImage(res.localIds, callback) //选定照片的本地ID列表

    },

    fail: function(error){

    Toast.clear();

    }

    })

    }

    }

    })

   },

3、获取上传图片本地列表 ，imageData就是你最后从微信拿到的图片数据

   readImage(localIds, callback){

    const imageData = []

    for(let i=0; i< localIds.length; i++){

    wx.getLocalImgData({

       localId: localIds[i].toString(),

    success(res) {

    const localData = res.localData;

    let imageBase64 = '';

    if (localData.indexOf('data:image') == 0) {

    //ios直接赋值

    imageBase64 = localData;

    }else{

    //安卓在拼接前要进行换行符的全局替换

    imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');

    }

    let fileData = wxUpload.dataURLtoFile(imageBase64);

    imageData.push(fileData)

    if(i == localIds.length-1){

    callback && callback(imageData)

    }

    },

    fail(res){

    Toast.clear();

    }

    })

    }

   }

}