需求比较急，就用了微信的weui

1
import weui from "weui.js/dist/weui.min";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//拉起微信的图片上传服务
upload() {
  $.utils.uploadImage(data => {
    this.signedUrl = data.signedUrl;
    this.sendData.originUrl = data.originUrl;
    this.submit(data.originUrl);
  }, true);
},

    //预览图片
preview(url) {
  let urls = [];
  urls[0] = url;
  window.wx.previewImage({
    current: url, // 当前显示图片的http链接
    urls: urls // 需要预览的图片http链接列表
  });
},

图片上传微信 API wx.chooseImage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
InitJsSdk: function (callback) {
    if (_wxInited) {
        callback && callback();
        return;
    }
    var url = "/weixin/jssdksign";
    $.ajax( url , {
        data: {
            "url":  window.location.href.split('#')[0]
        },
        type: "GET",
        success: function (data) {
            if (data) {
                data.jsApiList = [
                    "previewImage",
                    "getLocation",
                    "openLocation",
                    "chooseImage",
                    "uploadImage",
                    "onMenuShareTimeline",  //分享到朋友圈
                    "onMenuShareAppMessage",  //发送给朋友
                    "hideMenuItems",  //批量隐藏功能按钮
                    "showMenuItems"   //批量显示功能按钮
                ];
                wx.config(data);

                wx.ready(function () {
                    wx.hideMenuItems({
                        menuList: ['menuItem:share:appMessage','menuItem:share:timeline',"menuItem:share:qq","menuItem:share:QZone","menuItem:copyUrl"]
                    });
                    _wxInited = true;
                    callback && callback();
                });
            }
        },
        error:function(e){
        }
    });
},

//微信上传图片
uploadImage: function (callback,safe,count) {
    _utils.InitJsSdk(function () {
        wx.chooseImage({
            count: count || 1, // 默认9
            // sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认二者都有
            // sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds;
                try {
                    _utils.pushAllImg(localIds, safe, callback)
                } catch (error) {
                    console.log(JSON.stringify(error))
                }
            },
            error:function(error){
                $.message.show('图片选取失败!')
            }
        })
    })
},

查看预览,返回的wx.preview

遇到了微信公众号开发者工具，调用这两个方法都是报错的问题。发布测试后就发现 ok 了，原来工具不支持这个方法，还是得真机调试。

封装好的请求和方法一定要调试好了之后再调试，不然不停发布测试实在是耽误时间和精力。

提前测试好文件上传，替换好。抓包测试。

1
2
3
4
5
6
7
8
9
10
[{
id: '',
    number: '',
bank_num:''
},{

    id: '',
    number: '',
bank_num:''
}]

提交报错后， 提交中 loading 态没有取消,需要处理 catch error