微信小程序圖片上傳

微信小程序圖片上傳

ps: 最近項目使用到圖片上傳, 通過api中 wx.chooseImage(Object object)、wx.uploadFile實現

需求： 1. 最多上傳3張圖片，當第三張圖片時，添加按鈕隱藏， 反之顯示

​ 2. 每添加一張顯示刪除圖片icon, 實現刪除功能

API文檔

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{
						//操作失敗
                    }
                }
            })
        }
    })
},

提交事件

/**
 * 提交事件
 */
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{
            //失敗
        }
    })
},

刪除圖片

/**
 * 刪除圖片 事件
 */
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
    })
},

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>

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