前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信SDK实现多张图片上传

微信SDK实现多张图片上传

作者头像
明知山
发布2020-09-02 16:49:27
2.2K0
发布2020-09-02 16:49:27
举报
文章被收录于专栏:前端开发随笔前端开发随笔

必须要先wx.config配置,jsApiList里面引入我们需要的微信Api

代码语言:javascript
复制
    wx.config({
        debug: false,
        appId: 'appId',
        timestamp: 'timestamp',
        nonceStr: 'nonceStr',
        signature: 'signature',
        jsApiList: ['chooseImage', 'getLocalImgData']
    });

核心Js代码

代码语言:javascript
复制
   getupload() {
          wx.chooseImage({
              count: 9,
              sizeType: ['original', 'compressed'],
              sourceType: ['album', 'camera'],
              success: (res) => {
                  this.getpublish(res.localIds, 0)
              }
          });
      },
    getpublish(list, i) {
           wx.getLocalImgData({
               localId: list[i],
               success: (res) => {
                   var localData = res.localData
                   //将base64转换为blob
                   let base = atob(localData.substring(localData.indexOf(',') + 1));
                   let length = base.length;
                   let url = new Uint8Array(length);
                   while (length--) {
                       url[length] = base.charCodeAt(length);
                   }
                   let file = new File([url], 'a.jpg', {
                       type: 'image/jpg'
                   })
                   var formData = new FormData();
                   formData.append("file", file);
                   formData.append("key", "qqq");
                   axios({
                       method: "post",
                       url: "http://uploadFile",
                       data: formData
                   })
                       .then((res) => {
                       	   //采用递归上传
                           if (res.data.status == 200) {
                               this.file_list.push(res.data.info.url)
                               if (i + 1 == list.length) {
                                   console.log('上传成功')
                               }
                               if (++i < list.length) {
                                   this.getpublish(list, i);
                               }
                           } else {
                               alert('上传失败')
                           }
                       })
               }
           });
       },    
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-04-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档