关于小程序多图上传后端接收的问题

小程序基本功能还是比较齐全的,关于上传图片这块,只需要调用wx.chooseImage()API即可实现图片上传效果。

但是最近在使用的时候发现一个坑,就是后台一次只能接收到一张图片,如果要实现多图上传就有点尴尬了,需要自己进行处理,查询了一番度娘发现这个问题大家基本都遇到过,方法也比较好找,在这里贴下代码,方便小伙伴们和自己以后进行查阅。



    
        
    
    
        
            
                
                
             
        
    

//js部分
data: {
    src: []
},
//选择图片
chooseImgTap() {
    var that = this
    wx.chooseImage({
        count: 9,
        success: function (res) {
            // 成功个数
            var successUp = 0
            // 失败个数
            var failUp = 0
            // 总共个数
            var length = res.tempFilePaths.length
            // 第几个
            var i = 0
            wx.showToast({
                title: '上传中',
                icon: 'loading',
                 mask: true
            })
            that.uploadDIY(res.tempFilePaths, successUp, failUp, i, length)
        }
    })
},
// 上传图片
uploadDIY (filePaths, successUp, failUp, i, length) {
    wx.uploadFile({
        url: 'xxxx.com/index.php/v1/bbsarticle/uploadfile',//后端地址
        filePath: filePaths[i],
        name: 'pic',
        success: (res) => {
            successUp++
        },
        fail: (res) => {
            failUp++
        },
        complete: (res) => {
            this.data.src.push(JSON.parse(res.data).data.url)
            i++
            if (i == length) {
                this.setData({
                    src: this.data.src
                })
                wx.hideToast()
                setTimeout((res) => {
                    wx.showToast({
                        title: '上传成功',
                        icon: 'success',
                        mask: true
                     })
                }, 500)
             } else {  //递归调用uploadDIY函数
                 this.uploadDIY(filePaths, successUp, failUp, i, length)
             }
        },
    })
},
//图片预览
previewImgTap(event) {
    var that = this
    let index = event.currentTarget.dataset.index
    wx.previewImage({
        urls: that.data.src,
        current: that.data.src[index]
    })
},
//删除图片
delImage(event) {
    let that = this
    let index = event.currentTarget.dataset.index
    wx.showModal({
        title: '',
        content: '是否删除图片',
        success(res) {
            if (res.confirm) {
                that.data.src.splice(index, 1)
                that.setData({
                    src: that.data.src
                })
            }
        }
    })
},

小程序关于图片的处理大概就是上传预览删除这三大块,以上代码即可以实现全部功能,有错误的地方欢迎小伙伴的指正!!!

你可能感兴趣的:(关于小程序多图上传后端接收的问题)