kindeditor 批量上传 路径_微信小程序批量上传图片

上传图片在业务需求中属于较为常见的功能，在微信小程序中官方提供wx.chooseImage，wx.uploadFile两个api互相配合实现上传图片功能。单张图片上传直接按照官方dome即可,那么批量上传呢？

一，了解即将使用的api

1, wx.chooseImage

从本地相册选择图片或使用相机拍照。
主要参数：
count：控制选择图片张数至多9张；
sizeType：选择图片尺寸(压缩：compressed or 原图：original)；sourceType：图片来源(相册：album or 拍照：camera)

2, wx.uploadFile

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data
主要参数：
url：图片上传接口；
filePath：上传资源路径(string);
name: 文件对应的 key,(与后台接口约定的key);

通过这两个api的配合已然可以有很多种玩法了，但是wx.uploadFile的filePath入参必须为string且是生效的资源路径方能上传成功，故需要采用递归的方法循环调用方能实现批量上传。

二，封装批量上传函数

通过wx.chooseImage成功返回值res.tempFilePaths为所选资源路径数组

        /**     *      * @param {*} params // 批量上传入参     * @param {*} callBack // 递归回调     * @param {*} successFn // 全部完成回调     */    const batchUpload = (params,callBack,successFn) => {        if(!params.uploadUrl) {            console.log('请传入上传地址')            return        }        if(!(params.imgPaths instanceof Array)) {            console.log('请传入array类型')            return        } // 校验传入是否为数组        // let _that = this        let maxLength = params.imgPaths.length // 传入数组长度        let i = params.subscript?params.subscript:0 // 当前上传图片下标        let successNum = params.successNum?params.successNum:0 // 上传成功数        let failNum = params.failNum?params.failNum:0 // 上传失败数        let resultData = params.resultData?params.resultData:[] //  上传返回的imgUrl        let endData = {} // 成功回调暴露出去的结果        wx.uploadFile({            url: params.uploadUrl,            filePath: params.imgPaths[i],            name: 'test_batchUpload',            headers: {                "Content-Type": "multipart/form-data"            },            formData: {                // 其它参数            },            success(res) { // 返回code为指定结果表示上传成功反之上传失败                if (res.statusCode == 200) {                    let data = JSON.parse(res.data)                    successNum++                    resultData.push(data.url)                }else {                    failNum++                }            },            fail(res) {                failNum++            },            complete() {                i++                if(i==maxLength) { // 上传完毕调用成功回调暴露指定数据出去                    endData = {                        imgPaths:resultData,                        successNum:successNum,                        failNum: failNum,                    }                    successFn(endData)                }else{ // 执行下一张上传                    params.subscript = i                    params.successNum = successNum                    params.failNum = failNum                    params.resultData = resultData                    // console.log(_that,'_that')                    callBack(params,callBack,successFn)                }            }        })    }    export {        batchUpload,    }

三，页面中使用

以index.js为例

         import batchUpload form '../util/util.js'        Page({        data:{            showImage:[]        }                uploadImg() {            let that = this            wx.chooseImage({                count: 6,                success(res) {                    const tempFilePaths = res.tempFilePaths                    let file = tempFilePaths[0];                    let params = {                        uploadUrl: 'test_url', // 图片上传接口                        imgPaths: tempFilePaths                     }                    batchUpload(params,batchUpload,(res)=>{                        let showImage = that.data.showImage                        showImage = res.imgPaths                        that.setData({                             showImage                        },()=>{                            let msg = '成功上传'+res.successNum+"张,失败"+res.failNum+"张"                            wx.showToast({                                title:msg                            })                        })                    })                }            })        }    })

四，效果图

五，其它

粗略实现，可以玩的还有很多。比如加上小程序的uploadTask即可实现上传进度的监控。