微信小程序集中开发日志 DAY 4 【图片上传】

上一章  微信小程序集中开发日志 DAY 3 【生成小程序二维码 + 缓存小程序access_token】

图片上传

图片上传也是一个步步为坑的功能呢 : )

 

HTML

<text class="input-item-label">身份证正面</text>
<view class="img-upload">
    <view class="img-add" catchtap="chooseImg_face"></view>
    <view class="img-item">
        <image src='{{face}}' bindtap='preview_img'></image>
    </view>
</view>

JS

data: {
    face:'',
},

/**
* 身份证正面上传
*/
chooseImg_face: function () {
    var _this = this;
    wx.chooseImage({
        count: 2, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            var tempFilePaths = res.tempFilePaths;
            _this.setData({
                face: res.tempFilePaths
            })
            // 进行身份证照片真实度检测
            wx.uploadFile({
                url: '', 	//接口
                filePath: _this.data.face[0],
                name: 'face',
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function (msg) {
                    var data = JSON.parse(msg.data);//wx.uploadFile返回值是字符串，需要自己转化成json
                    console.log(data);
                },
                fail: function (error) {
                    console.log(error);
                }
            })
        }
    })
},

我遇到的坑是wx.uploadFile的返回值data不是json格式，是string

需要自己将data转义为json格式 ： JSON.parse()

 

下一章   微信小程序集中开发日志 DAY 5 【支付】