微信小程序之图片文件上传

选择图片: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

上传图片： https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

小程序身份认证脊谈界面，点击上传地方的加号，选择相册或者拍照，进行上传，原图无压缩，最多上传3张（分别为身份z正面、反面和手持） 。

注：这边以laravel框架为例

1、定义文件上传路由：

2、在laravel框樱缓碰架中的config文件夹下的filesystems.php文件中配置上传路径

3、身份认证文件上传方法

1、在身份认证界面的wxml中绑定选择图片事件

2、在身份认证界面的js中定义上传图片的方法

3、上传成功后，将上传的文哪液件地址存到数组中

在实际开发中，很多时候都需要要上传图片，但是对于上传多张时需要一张张的上传，因为图片都可能比较大，这时就需要我们对上纯则传图片的API进行进一步的处理，这样就解决了我们同时选择上传多张图片需求。所以歼棚为了方便以后使用，封装成一个特定的组件分享出氏裤则来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张图片上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1.页面样式布局

view

css

图片插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： https://github.com/kingbuwu/uploadImages

wxml部分

<van-uploader file-list="{{ picture_list }}" preview-full-image="{{false}}" max-size="2048000" max-count="9" multiple="{{true}}" bind:after-read="afterRead" bind:delete="deleteImg" />

js部分

afterRead:function(event) {

const { file } = event.detail

    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

    var obj={}

obj.path=file

    this.uploadimg(obj)

},

uploadimg:function(data) {

wx.showLoading({

title:'上传档饥键中...',

        mask:true,

    })

var that =this,

        i = data.i ? data.i :0,

        success = data.success ? data.success :0,

        fail = data.fail ? data.fail :0

    let userInfo=wx.getStorageSync('userInfo')

    let peopleId=userInfo.peopleId

    var picture_list = that.data.picture_list

    wx.uploadFile({

url: baseUrl +'impl/uploadImg',

        filePath: data.path[i].path,

        name:'file',

        formData: {

'type':1,

            'peopleId':peopleId,

        },

        success: (res) =>{

wx.hideLoading()

            success++

            let obj =  JSON.parse(res.data).data

            if(obj.hasOwnProperty('url')){

picture_list.push({

url:obj.url,

                    id:obj.id

                })

                that.setData({

picture_list

})

}

},

        fail: (err) =>{

wx.hideLoading()

            wx.showToast({

title:'上传失败!',

                icon:'none'

            })

fail++

     行巧   },

        complete: () =>{

i++

       肢戚     if (i == data.path.length) {//当图片传完时，停止调用

            }else {//若图片还没有传完，则继续调用函数

                data.i = i

                data.success = success

                data.fail = fail

                that.uploadimg(data)//递归，回调自己

            }

}

})

},

deleteImg(e) {

let index=e.detail.index

    console.log(index)

    let {picture_list}=this.data

    let that=this

    wx.showModal({

content:'确定删除？',

        success: (res) =>{

if (res.confirm) {

picture_list.splice(index,1)

                that.setData({

picture_list

                })

console.log(that.data.picture_list)

            }else if (res.cancel) {

console.log('用户点击取消')

}

},

    })

},

---