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

比眉伴天荒 2023-06-10 07:29 18阅读 0赞

<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;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDIxMzU3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDIxMzU3_size_16_color_FFFFFF_t_70]: /images/20230531/b41cb67262c64334967c630a1508ca1c.png