微信小程序多图片上传

wxml

    <view class="upload_img_box">

        <view class="" style="margin-bottom:10rpx;">

            <text>图片上传(最多6张)</text>

            <!-- <text class="xinghao">*</text> -->

        </view>

        <view class="flex4 upload_img_wrap">

            <view class="upload_img" wx:for="{{imgarr}}" wx:key="index">

                <image style="width:100%;height:100%;" src="{{item}}"></image>

                <image class="huantu" bindtap="editImg" data-hinx="{{index}}" src="/style/icon/close3.png"></image>

            </view>

            <view class="upload_img {{imgarr.length==6?'hide':'show'}}" bindtap="ChooseImage">

                <text>+</text>

                <text>选择图片</text>

            </view>

        </view>

    </view>

wxss

.upload_img_box{

  margin: 10rpx 0;

}

.upload_img_wrap{

  flex-wrap: wrap;

  padding: 10rpx 0;

}

.upload_img{

  width: 140rpx;

  height: 140rpx;

  border-radius: 10rpx;

  text-align: center;

  background-color: #f2f7fa;

  margin: 10rpx 15rpx 10rpx 0;

  position: relative;

}

.upload_img>text{

  display: block;

}

.upload_img>text:nth-child(1){

  font-size: 60rpx;

  color: #333;

}

.upload_img>text:nth-child(2){

  font-size: 26rpx;

  color: #333;

}

.upload_box>view:nth-last-child(1){

  border: none;

}

js

  data:{

        imgarr: [],

}

 ChooseImage: function (e) {

        var that = this;

        var imgarr = that.data.imgarr;

        wx.chooseImage({

            count: 1,

            sizeType: ['original', 'compressed'],

            sourceType: ['album', 'camera'],

            //成功时会回调

            success: function (res) {

                const tempFilePaths = res.tempFilePaths;

                wx.uploadFile({

                    url: 'https://wanji.shinelee.cn/app/index.php?i=2&from=wxapp&c=entry&a=wxapp&m=fanchun_usedcar&do=picuploads',

                    filePath: tempFilePaths[0],

                    name: 'upfile',

                    success(res) {

                        imgarr.push(res.data);

                        that.setData({

                            imgarr,

                        })

                    },

                    fail: function (res) {

                        wx.showToast({

                            title: "上传失败请稍后重试。",

                            icon: "none",

                            duration: 1500,

                            mask: true

                        });

                    }

                })

            }

        })

    },

    editImg(e) {

        var imgarr = this.data.imgarr;

        imgarr.splice(e.currentTarget.dataset.hinx, 1);

        this.setData({

            imgarr,

        })

    },