小程序之批量上传图片_小程序批量上传图片 csdn

作者：从前慢现在也慢 | 2024-03-27 18:00:31

踩

小程序批量上传图片 csdn

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

上传图片在项目中属于一个常见场景。在小程序中同样遇到了这样的需求。如何去解决呢？
利用wx.chooseImage()，wx.uploadFile()两个接口即可完成小程序的批量上传图片。

1, 知己知彼，百战不殆（先来瞅瞅这两个api的主要参数）

wx.chooseImage()

从本地相册选择图片或使用相机拍照。

主要参数：
count：控制选择图片张数至多9张；
sizeType：选择图片尺寸（压缩：compressed or 原图：original）；
sourceType：图片来源（相册：album or 拍照：camera）

wx.uploadFile()

   将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

主要参数：
url：图片上传接口；
filePath：上传资源路径（string）;
name: 文件对应的 key,(与后台接口约定的key);

wx.chooseImage成功返回值res.tempFilePaths为所选资源路径数组
wx.uploadFile的filePath入参必须为string且是生效的资源路径方能上传成功，故需要采用递归的方法循环调用方能实现批量上传。

2, 工欲善其事必先利其器（进行批量上传的封装）

util.js


  /*
   *   批量上传函数
   *   @params {*} params 上传入参对象
   *   @params {Function} callbackFn 循环回调函数
   *   @params {Function} successFn 成功回调函数
   */
 const batchUpload = (params,callBack,successFn) => {
     if(!params.uploadUrl) {
        console.log('请传入上传地址')
        return
     }
     if(!(params.imgPaths instanceof Array)) {
        console.log('请传入array类型')
        return
     } // 校验传入是否为数组
     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,
    }

3, 项目中引用

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

4，效果图

[图片上传失败...(image-353ab7-1553483695861)]
[图片上传失败...(image-a789e3-1553483695861)]

5, 其它

a, 批量封装函数中对上传文件大小的监控
b, 加上uploadTask可以实现上传进度的监控
...

作者：齐梓曦
链接：https://www.jianshu.com/p/f298c92c74b8
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/326023