小程序 上传图片带预览带删除功能

<view class="container">
    <view class="title">用户反馈</view>
        <form class="form"  bindsubmit="formSubmit"
                            bindreset="formReset"
                            report-submit="true"
                            report-type="subscribe"
                            subscribe-id="food"
                            template-id="BD0001">
            <view class="question">
                <view class="pass pass1">
                    <view class="ques_title">您遇到了什么问题</view>
                    <radio-group name="radio-group" class="ques_ul">
                        <label class="items"><radio value="radio1" checked/>答案文不对题或明显错误</label>
                        <label class="items"><radio value="radio2"/>答案不算错但是不全面</label>
                        <label class="items"><radio value="radio3"/>答案文不对题或明显错误</label>
                        <label class="items"><radio value="radio4"/>答案不算错但是不全面</label>
                        <label class="items"><radio value="radio5"/>答案文不对题或明显错误</label>
                    </radio-group>
                </view>
                <view class="pass pass2">
                    <view class="ques_title">您遇到的问题具体是什么?</view>
                    <view class="pass2_textarea">
                        <textarea style="height: 6em;font-size: 14px;"
                                  maxlength="-1"
                                  auto-focus="{{focus}}"
                                  cursor="-1" show-confirm-bar="true"
                                  placeholder="您遇到的问题具体是什么?"
                                  placeholder-class="plh"
                                  selection-start="-1"
                                  selection-end="-1"
                                  adjust-position="true"
                                  bindinput="bindInput"
                                  bindfocus="bindFocus"
                                  bindblur="bindBlur"
                                  bindlinechange="bindLineChange"
                                  bindconfirm="bindConfirm"
                                  class="textarea_input textarea_text"
                        />
                        <view class="textarea-remind"><text class="textarea-text-cur" id="text-count">{{ textareanumber }}</text>/300</view>
                    </view>
                    <view class="addpic">
                        <view class="addbutton"  bindtap="selectImage">+</view>
                        <view s-if="{{imageList.length > 0 ? true : false}}" class="image-container">
                            <view class="imageList" s-for="{{ imageList }}">
                                <view class="delpic"  data-index="{{ index }}" bindtap="delpic">
                                    <image src="/images/delete@2x.png"></image>
                                </view>
                                <image class="image-items" src="{{ item }}" data-src="{{ item }}"></image>
                            </view>
                        </view>
                        <view s-else class="addtip" >
                            <view class="addtip_text">上传图片，最多四张</view>
                            <view class="addtip_text">图片小于2M</view>
                        </view>
                    </view>
                </view>
                <view class="pass  pass3">
                    <view class="ques_title">您的联系方式是什么？</view>
                    <input type="text" class="ipt" cursor='10' bindblur="bindKeyblur"  bindconfirm="bindKeyconfirm" placeholder="请留下邮箱或电话，使我们快速反馈"/>
                </view>
                <button class="tel_input" formType="submit" type="primary">提交</button>
            </view>
        </form>
</view>

Page({
    data: {
        //输入的文本数量
        textareanumber: 0,                      
        //上传图片组件
        sourceIndex: 2,
        sourceArray: ['拍照', '相册', '拍照或相册'],
        sizeIndex: 2,
        sizeArray: ['压缩', '原图', '压缩或原图'],
        countIndex: 0,
        countArray: [],
        imageList: []
    },
    onLoad: function () {
        // 监听页面加载的生命周期函数
    },
    bindInput(e) {
        this.setData({ 
            textareanumber: e.detail.cursor
        })
    },
    //上传图片组件
    selectImage() {
        const sourceIndex = this.getData('sourceIndex');
        if( this.data.imageList.length < 3 ){
            const count = this.getData('countIndex') + 1;
            if (sourceIndex === 2) {
                swan.showActionSheet({
                    itemList: ['拍照', '相册'],
                    success: res => {
                        const sourceType = res.tapIndex === 0 ? 'camera' : 'album';
                        this.chooseImage(sourceType, count);
                    }
                });
            } else {
                const sourceType = sourceIndex === 0 ? 'camera' : 'album';
                this.chooseImage(sourceType, count);
            }
        }else{
                swan.showToast({
                    title: '最多三张哦~',
                })
        }
    },
    chooseImage(sourceType, count) {
        const sizeIndex = this.getData('sizeIndex');
        let sizeType = ['compressed', 'original'];
        if (sizeIndex === 0) {
            sizeType = ['compressed'];
        } else if (sizeIndex === 1) {
            sizeType = ['original'];
        }
        swan.chooseImage({
            count,
            sizeType,
            sourceType: [sourceType],
            success: res => {
                var image = res.tempFilePaths[0];
                var arr = this.data.imageList;
                arr.push(image);
                this.setData('imageList', arr);
            },
            fail: err => {
                console.log('chooseImage fail', err);
            }
        });
    },
    delpic: function(e){
        var idx = e.currentTarget.dataset.index;
        var imageList = this.data.imageList;
        imageList.splice(idx, 1);
        this.setData('imageList', imageList);
    }
});

html,body{
    font-family: "微软雅黑" !important;
    background: #f5f5f5;
}
ul{
    list-style-type: none
}
.container{
    background: #fff;
    margin-bottom: 2rem;
    padding-bottom: .5rem;
}
.title{
    width: 100%;
    color: #000;
    font-weight: bold;
    box-sizing: border-box;
    display: block;
    font-size: 1rem;
    line-height: 2.5rem;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
}
.question{
    box-sizing: border-box;
    padding: 0 12px 12px 12px;
}
.ques_title{
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: .7rem;
}
.items{
    font-size: .85rem;
    line-height: 2.4rem;
    color: #555;
    border-bottom: 1px solid #eee;
    display: block;
}
.checkedbox{
    width: 12px;
    height: 12px;
    border: 1px solid #999;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: .8rem;
}
.pass{
    margin-top: 1.2rem;
    margin-bottom: .6rem;
}
.pass2_textarea{
    border: 1px solid #eee;
    border-radius: 5px;
}
.textarea_text{
    resize: none;
    width: 100%;
    word-break: normal;
    word-wrap: normal;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: .9rem;
    color: #000;
    background-color: #fff;
    border-radius: 5px;
    overflow: scroll;
    outline: 0;
    box-sizing: border-box;
    padding: .5rem;
    border: none;
}
.textarea-remind{
    color: #999;
    font-size: .8rem;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
    padding: .5rem;
}
.textarea-text-cur{
    color: #999;
}
.addpic{
    margin-top: .6rem;
    display: flex
}
.addbutton{
    width: 5.5rem;
    height: 5.5rem;
    border-radius: .05rem;
    border: 1px solid #eee;
    display: flex;
    display: -webkit-flex;
    align-items:center;
    justify-content:center;
}
.imageList{
    width: 5.5rem;
    height: 5.5rem;
    border-radius: .3rem;
    overflow: hidden;
    margin-left: .4rem;
    display: inline-block;
    margin-bottom: .3rem;
    position: relative;
}
.delpic{
    position:absolute;
   top:0;
   right:0;
   background:#fff;
   width:1.5rem;
   height:1.5rem;
   opacity:.8;
}
.delpic image{
    width: 100%;
    height: 100%
}
.image-items{
    width: 100%;
    height: 100%;
}
.addtip{
    display: inline-block;
    margin-left: .5rem;
    
}
.addtip_text{
    color: #999;
    font-size: .8rem;
    position: relative;
    top: 1.6rem;
}
.tel_input{
    width: 100%;
    font-size: 1rem;
    background-color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: .3rem;
    margin-top: 2rem;
    color: #333 !important;
    font-weight: bold;
}
.submitbutton{
    display: inline-block;
    padding: 0 .08rem;
    width: 100%;
    font: 14px/24px Arial,Helvetica,sans-serif;
    line-height: 2rem;
    text-decoration: none;
    text-align: center;
    color: #000;
    background-color: #fff;
    border: 1px solid #707379;
    border-radius: 5px;
    vertical-align: middle;
    overflow: hidden;
    outline: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    border-radius: 5px;
}
#demo{
    width: 100% !important;
    height: auto !important;
}
.upload_box{
    margin: 0 auto !important;
}
.add_imgBox{
    width: 1.2rem !important;
    height:1.5rem !important;
}
.imgBox{
    width: 1.2rem !important;
    height:1.5rem !important;
}
.upload_main{
    border-top: none;
    border-bottom: none;
}
.uploadImg img{
    margin: 0 auto;
}
.checked{
    background: #888;
}
.ipt{
    border: 1px solid #eee;
    font-size: .9rem;
    padding: .3rem;
    border-radius: .3rem;
}