Fork me on GitHub

微信小程序- wx.chooseImage上传多张图片

发表于 | 分类于 | 阅读次数： | 阅读次数：
先来说明一下我们需要实现的最终效果

实现单张图片的选择、上传、预览

例如下图所示的界面，这是一个比较典型的上传多张图片的表单，用户可以从自己的手机相册中选择多张图片(或直接通过摄像头拍摄)，并在页面中显示上传的图片缩略图。且当点击缩略图时，可以全屏预览查看这些图片，当然也可以删除其中某张或所有图片。

一、wx.chooseImage简介

微信小程序提供了很多Api，其中wx.chooseImage就是从本地相册选择图片或使用相机拍照。具体介绍可以查看官方介绍。上传多张图片的原理和上传单张图片的原理是一致的。如何上传单张图片？点击查看

下面我们直接看代码：

WXML

1
2
3
4
5
6
7
8
9
10
11
12
13
<view class="multipleImg">
    <view class='upload' wx:for="{{chooseImgs}}" wx:key>
        <!--显示缩略图-->
        <image src="{{item}}" class="addImg" mode="aspectFill" bindtap="previewImg" data-index='{{index}}' data-item='{{item}}'/>
        <!--删除-->
        <image src="../../img/deleteImg.png" class="deleteImg" mode="aspectFill" bindtap="deleteImg" data-index='{{index}}' data-item='{{item}}'/>
    </view>

    <!--上传图片-->
    <view class='upload' style='display:{{hideAdd?"none":"block"}}'>
        <image src='../../img/release/add.png' class="addImg" bindtap="uploadImgs" mode="aspectFill"/>
    </view>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.multipleImg {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.upload {
  position: relative;
}

.addImg {
  width: 158rpx;
  height: 158rpx;
  margin: 50rpx 20rpx 30rpx 0;
}

.deleteImg {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 25rpx;
  right: 0;
}

js

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
const domain = "http://xxxxx"; // xxxxx为自己公共url部分
Page({
      data: {
        hideAdd: false, // 是否隐藏添加图片的图标
        upload: [], // 上传的图(url)
        chooseImgs: [], // 用户选择上传的图片(缩略图)
    },
  
    /* ================== 多图上传 ================== */
    uploadImgs: function () {
        const that = this;
        const {chooseImgs} = this.data;
        wx.chooseImage({
            count: 9 - chooseImgs.length, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                const newChooseImgs = res.tempFilePaths;
                const imgInfo = res.tempFiles;

                // 判断选择的图片是否符合要求
                for (let i = 0; i < imgInfo.length; i++) {
                    console.log("尺寸", imgInfo[i].size);
                    // 判断图片尺寸
                    if (imgInfo[i].size / 1024 / 1024 >= 10) {
                        wx.showModal({
                            title: '提示', // 标题
                            content: "图片超过10MB啦~",// 内容
                            showCancel: false, // 是否显示取消按钮
                            confirmText: '确定', // 确认按钮的文字
                        });
                        return
                    }
                    // 判断图片格式
                    const imgSplit = imgInfo[i].path.split(".");
                    const imgSLen = imgSplit.length;
                    // console.log("格式", imgSplit, imgSLen, imgSLen - 1);
                    if (["jpg", "jpeg", "png"].includes(imgSplit[imgSLen - 1])) {
                        console.log("格式正确");
                    } else {
                        console.log("格式错误");
                        utils.showModalInfo({
                            content: "请选择正确的图片格式上传",
                        });
                        return
                    }
                }

                console.log("选择图片之前", res, chooseImgs, newChooseImgs);
                newChooseImgs.forEach(item => {
                    chooseImgs.push(item);
                });
                // console.log("选择图片后", chooseImgs, newChooseImgs);
                // 限制上传数量
                if (chooseImgs.length > 9) {
                    wx.showModal({
                        title: '提示',
                        content: "请选择正确的图片格式上传",
                        showCancel: false,
                        confirmText: '确定',
                    });
                }

                // 判断是否显示添加图片
                console.log("显示添加图片", chooseImgs.length);
                if (chooseImgs.length > 0) {
                    //图如果满了9张，不显示加图
                    if (chooseImgs.length >= 9) {
                        that.setData({
                            hideAdd: true
                        })
                    } else {
                        that.setData({
                            hideAdd: false
                        })
                    }

                    // 显示预览图
                    that.setData({
                        chooseImgs
                    });

                    //  网络请求 上传图片
                    const requestMsg = [];
                    newChooseImgs.forEach(item => {
                        wx.uploadFile({
                            url: domain + '/xxxxx', // xxxxx为上传图片的接口
                            filePath: item,
                            header: {
                                'content-type': 'multipart/form-data'
                            },
                            name: 'file',
                            formData: {
                                'isup': "2"
                            },
                            success: function (e) {
                                console.log("访问上传接口成功", e);
                                const data = JSON.parse(e.data);
                                //把每次选择的图push进数组
                                const upload = that.data.upload;
                                console.log("之前上传的图数组", upload, data);
                                upload.push({
                                    img: data,
                                    isShow: false,
                                    requestMsg, // 上传返回信息代号
                                });
                                that.setData({
                                    upload,
                                });
                            },
                            fail: function (e) {
                                console.log("访问接口失败", e);
                                wx.showToast({
                                    title: "网络出错",
                                    icon: 'none',
                                    duration: 1000
                                });
                            },
                        });
                    });
                }
            }
        })
    },
  
    /* ================== 点击图片放大预览 ================== */
    previewImg: function (e) {
        const contentImg = e.currentTarget.dataset.item;
        // console.log("点击图片放大预览", contentImg);
        wx.previewImage({
            current: contentImg, //当前图片地址
            urls: [contentImg], //所有要预览的图片的地址集合 数组形式
            success: function (res) {
            },
            fail: function (res) {
            },
            complete: function (res) {
            },
        })
    },

    /* ================== 点击图片删除 ================== */
    deleteImg: function (e) {
        const index = e.currentTarget.dataset.index;
        const {upload, chooseImgs} = this.data;
        upload.splice(index, 1);
        chooseImgs.splice(index, 1);
        // console.log("点击图片删除", index);
        this.setData({
            upload,
            chooseImgs,
            hideAdd: chooseImgs.length === 9, // 是否隐藏添加图片的图标
        })
    },
  })
------------- The End -------------

本文标题:微信小程序- wx.chooseImage上传多张图片

文章作者:White

发布时间:2019年08月12日 - 14:08

最后更新:2019年08月12日 - 16:08

原始链接:http://yoursite.com/2019/08/12/WX-uploadImgs/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。