小程序图片上传

html

<view class='title'>
    <view class='title-left'>请留下您宝贵的建议！</view>
    <view class='title-right'>
        <span class='title-right-count'>{{words_count}}</span>/200</view>
</view>

<view class='content'>
    <block wx:if='{{textarea_hidden == 0}}'>
        <textarea class='text_class' bindinput="textarea_hidden" placeholder="请详细描述您的问题，我们将及时跟进解决。\n(建议添加相关问题截图)" placeholder-style="color:rgba(153,153,153,1);" maxlength='200'/>
    </block>
    <block wx:else>
        <view class='text_class'>{{text_data}}</view>
    </block>
</view>

<view class='pic-title'>
    <view class='pic-title-content'>上传凭证
        <span class='pic-title-content-right'>
            (不超过
            <span class='pic-title-content-right-count'>3</span>张)
        </span>
    </view>
</view>

<view class='pic-content'>
    <view class="camera" bindtap='uploadImg'>
        <image src="/img/common/camera.png" class="img">
        </image>
    </view>

    <block wx:for="{{pics}}" wx:for-item="pic">
          <image class="each-img" src='{{pic}}'>
                <icon class='delete-icon' type="clear" size="40rpx" color="#999999" bindtap='delete_this' data-src="{{pic}}"/>
          </image>
     </block>
</view>

<view class='explain'>
    <view class='explain-content'>如有紧急问题，您可以立即联系
        <span class='service'>农商行官方客服。</span>
    </view>
</view>

<view class='sub'>
    <button bindtap="submit">提交</button>
</view>

<view class="mask {{mask_show ? 'mask-show' : ''}}" catchtouchmove="doNotMove" bindtap='closePage'>
    <view class='mask-content'>
        <view class='title'>非常感谢！</view>
        <view class='content'>我们已经收到您的宝贵意见，我们将迅速跟进。</view>
        <image src="/img/person/thanks.png" class="thanks">
        </image>
        <view class='close'>
            <image src="/img/common/close.png" class='close-icon'>
            </image>
        </view>
    </view>
</view>

css

.title {
    margin: 20rpx;
    display: flex;
    position: relative;
}

.title .title-left {
    font-size: 36rpx;
    font-weight: bold;
    color: rgba(34, 34, 34, 1);
}

.title .title-right {
    position: absolute;
    top: 5rpx;
    right: 0rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: rgba(34, 34, 34, 1);
}

.title .title-right-count {
    color: rgba(153, 153, 153, 1);
}

.content {
    padding: 20rpx;
}

.content .text_class {
    width: 100%;
    height: 300rpx;
    font-size: 26rpx;
    line-height: 1.25;
    z-index: -1;
    color: rgba(153, 153, 153, 1);
    position: static;
}

.pic-title {
    margin: 20rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
}

.pic-title .pic-title-content-right {
    color: #999;
}

.pic-title .pic-title-content-right-count {
    color: #fb0000;
}

.pic-content {
    margin-left: 10rpx;
    margin-right: 10rpx;
    display: flex;
    flex-wrap: wrap;
    margin-top: 60rpx;
    margin-bottom: 60rpx;
}

.pic-content .camera {
    width: 175rpx;
    height: 175rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 10rpx;
    position: relative;
    margin-top: 20rpx;
}

.pic-content .camera .img {
    width: 74rpx;
    height: 54rpx;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -55%);
}

.pic-content .each-img {
    overflow: visible;
    margin-left: 10rpx;
    width: 175rpx;
    height: 175rpx;
    margin-top: 20rpx;
    position: relative;
}

.pic-content .each-img .delete-icon {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    right: 5rpx;
    top: 0rpx;
    width: 38rpx;
    height: 38rpx;
}

.explain {
    margin: 40rpx 20rpx 20rpx 20rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
}

.explain .service {
    color: #0265ff;
}

.sub {
    margin-top: 80rpx;
}

.sub button {
    padding: 0rpx;
    width: 610rpx;
    height: 100rpx;
    background: rgba(2, 101, 255, 1);
    border-radius: 10rpx;
    color: #fff;
}

.mask {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
}

.mask-show {
    display: block;
}

.mask .mask-content {
    width: 482rpx;
    height: 613rpx;
    background: white;
    border-radius: 10rpx;
    position: absolute;
    left: 50%;
    top: 44.5%;
    transform: translate(-50%, -55.5%);
    z-index: 20000;
}

.mask-content .title {
    display: block;
    font-size: 38rpx;
    margin-top:36rpx;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}

.mask-content .content {
    margin-top:30rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}

.mask-content .thanks {
    width: 256rpx;
    height: 256rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top:50rpx;
}

.mask .close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -126rpx;
}

.mask .close .close-icon {
    width: 78rpx;
    height: 78rpx;
}

js

const toast = require('../../../utils/toast.js');
const util = require('../../../utils/getData.js');
const app = getApp();

Page({

    /**
     * 页面的初始数据
     */
    data: {
        pics: [],
        textarea_hidden: 0,
        mask_show: 0,
        text_data: "",
        words_count: 0
    },
    doNotMove: function() {
        console.log('stop user scroll it!');
        return;
    },
    textarea_hidden: function(e) {
        let text_data = e.detail.value;
        let words_count = text_data.length;
        let that = this;
        that.setData({
            text_data: text_data,
            words_count: words_count
        })
    },
    submit: function(e) {
        let that = this;
        // 获取描述内容
        let content = that.data.text_data;
        if (content == '') {
            toast.showToast('请填写反馈内容！');
            return;
        }

        util.getData('feedback', {
            content: content,
            images: JSON.stringify(that.data.pics),
            openid: app.globalData.openid,
            method: 'POST'
        }, function(data) {
            if (data.errno !== 0) {
                toast.showToast(data.errdesc);
                return;
            }

            that.setData({
                textarea_hidden: 1,
                mask_show: 1
            })
        })

    },
    closePage: function(e) {
        wx.navigateBack();
    },
    uploadImg: function(e) {
        let {
            pics
        } = this.data;
        if (pics.length == 3) {
            return;
        }
        let that = this;
        wx.chooseImage({
            count: 3 - pics.length,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: function(res) {
                let tempFilePaths = res.tempFilePaths
                let arr = that.uploadMutileimg({
                    pictures: tempFilePaths
                })
            }
        })

    },
    uploadMutileimg: function(data) {
        var that = this,
            i = data.i ? data.i : 0,
            success = data.success ? data.success : 0,
            fail = data.fail ? data.fail : 0;
        wx.uploadFile({
            url: 'https://xxx/Upload/uploadMoreImg',
            filePath: data.pictures[i],
            name: 'file',
            success: (res) => {
                success++;
            },
            fail: (res) => {
                fail++;
            },
            complete: (res) => {
                i++;
                var imgdata = JSON.parse(res.data);
                var img = imgdata.data[0];
                that.data.pics.push(img);
                if (i == data.pictures.length) { //当图片传完时，停止调用   
                    that.setData({
                        pics: that.data.pics
                    })
                } else { //若图片还没有传完，则继续调用函数                    
                    data.i = i;
                    data.success = success;
                    data.fail = fail;
                    that.uploadMutileimg(data);
                }

            }
        })
    },
    delete_this: function(e) {
        var pics = this.data.pics;
        var src = e.currentTarget.dataset.src;
        for (var i = 0; i < pics.length; i++) {
            if (pics[i] == src) {
                pics.splice(i, 1);
            }
        }
        this.setData({
            pics: pics
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }
})

太难了！！！搞了两天。