微信小程序图片上传并移除

微信小程序图片上传

ps: 最近项目使用到图片上传, 通过api中 wx.chooseImage(Object object)、wx.uploadFile实现

需求：

1. 最多上传3张图片，当第三张图片时，添加按钮隐藏， 反之显示
2. 每添加一张图片时，显示删除icon, 实现删除功能。

官方API

wx.chooseImage(Object object)

wx.uploadFile(Object object)

效果图

1. 选择图片并上传到服务器

这里选择每张图片时，上传到服务器，最后把图片的地址提交给后端。

• 通过wx.chooseImage选择图片或拍照，回调成功后把返回图片数据保存。然后在wx.uploadFile时作为参数传入资源的路径。
• 使用wx.uploadFile将本地资源上传到服务器， 回调成功后把返回的path字段存在到一个数组中。
• 最后： 把数组里的图片path及其他内容一起提交给后台。（案例中以逗号分隔格式）。

选择图片返回数据效果图

wx.chooseImage返回数据

上传到服务器数据效果图

wx.uploadFile请求接口返回数据

 /**
  * 页面的初始数据
  */
data: {
    hideAddImg: false, //隐藏添加按钮图片
    files: [],
    uploadImgArr: [],
},


/**
 * 上传图片事件
 */
chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            //console.log(res);
            that.setData({
                files: that.data.files.concat(res.tempFilePaths[0])
            });
            //console.log(res.tempFilePaths[0]);

            //大于3张， 隐藏 添加按钮
            if(that.data.files.length >= 3) {
                that.setData({
                    hideAddImg: true
                })
            }
            
            // 将本地资源上传到服务器
            //备注： 每选择一张图片上传到服务器，并保存在数组中。提交时：把数组数据上传
            var token = wx.getStorageSync('Authorized-Token') || ''
            wx.uploadFile({
                url: http.rootDocment +'user/upload-img',
                filePath: res.tempFilePaths[0],
                name: 'img',
                header:{
                    'Authorized-Token': token,
                    'content-type':'multipart/form-data'
                },
                success(res) {
                    var infoData = JSON.parse(res.data);
                    if (infoData.code==200){
                        // 保存返回的 图片路径
                        that.setData({
                            uploadImgArr: that.data.uploadImgArr.concat(infoData.data.path)
                        });
                    }else{
						//操作失败
                    }
                }
            })
        }
    })
},

2. 提交事件

/**
 * 提交事件
 */
repairsSubmit: function() {
    var that = this;

    //省略  非空判断

    var params = {
        mini_img: that.data.uploadImgArr.join(","),
    }
    http.postReq('order/repair', params, function (res) {
        if (parseInt(res.code) == 200) {
            //提交成功
        }else{
            //失败
        }
    })
},

提交图片请求效果图

3. 删除图片

/**
 * 删除图片 事件
 */
removeImg: function(e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    //console.log(that.data.files.splice(index, 1))

    //小于 3张时， 添加按钮显示
    if(that.data.files.length <= 3) {
        that.setData({
            hideAddImg: false
        })
    }

    that.data.files.splice(index, 1);
    that.data.uploadimgarr.splice(index, 1);
    that.setData({
        files: that.data.files,
        uploadimgarr: that.data.uploadimgarr
    })
},

4. wxml

<view class="uploadImgBox">
    <view class="desc">请拍摄相关的图片，便于工作人员维修</view>
    <view class="clearfix imgList">
          <!-- 遍历数组 -->
        <view wx:for="{{files}}" wx:key="*this" wx:for-index="bindIndex">
            <view class="item">
                <image src="{{item}}" mode="aspectFill"></image>
                  <!-- 删除icon 自定义属性 拿当前下标-->
                <view class="removeBtn" bindtap="removeImg" data-index="{{bindIndex}}">
                    <image src="/libs/assets/images/icon/del.png" mode="aspectFill"></image>
                </view>
            </view>
        </view>
          <!-- 添加图片按钮 -->
        <view>
            <view class="item addImg" bindtap="chooseImage" hidden="{{hideAddImg}}">
                <image src="/libs/assets/images/icon/addImg.png" mode="aspectFill"></image>
            </view>
        </view>
    </view>
</view>

5. wxss

在项目中配置scss自动编译wxss

可参考这个配置流程

.uploadImgBox {
    .desc {
        @include sc(13px, #edb353);
        height: 57rpx;
        @include fc;
        background-color: #f9f3e8;
        padding-left: 35rpx;
    }
    .imgList {
        margin: 31rpx 26rpx 31rpx 5rpx;
        >view {
            display: inline-block;
            float: left;
            padding-left: 29rpx;
            .item {
                @include wh(210rpx, 210rpx);
                position: relative;
                .removeBtn {
                    position: absolute;
                    right: 0rem;
                    top: 0rem;
                    @include wh(50rpx, 50rpx);

                    i {
                        font-size: 20px;
                        position:  absolute;
                        right: 0;
                        top: -1px;
                        color: #000;
                        opacity: .5;
                    }
                    image {
                        @include wh(100%, 100%);
                        @include borderRadius(0 11rpx 0 0);
                    }
                }
                image {
                    @include wh(100%, 100%);
                    @include borderRadius(11rpx);
                }
            }
            .addImg {
                // @include fcc;
                // border: 1px dashed #aaa;
                // img {
                //     @include wh(.84rem, .72rem);
                // }
            }
        }
    }
}