小程序之批量上传图片

Posted 2023-05-02

参考技术A

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

wx.chooseImage()

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

wx.uploadFile()

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

util.js

index.js

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

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

微信小程序之上传多张图片

之前写过一篇小程序商品发布的博客，里面有上传多张图片的功能，这里单独拿出来实现一下，小程序的upLoadFile一次只能上传一张图片，需要循环调这个接口来实现

 for (var i = 0; i < that.data.banner.length; i++) 
        wx.uploadFile(
          url: app.globalData.baseUrl + '/wechat/release/addProductPhoto',
          filePath: that.data.banner[i],
          name: 'banner',
          formData: 
            'parameters': JSON.stringify(that.data.params)
          ,
        )

传向后台的参数需要用JSON.stringify()转成json字符串的格式

这个就是小程序上传多张图片的功能，如果需要一次上传两种不同的图片（图片详情和图片轮播）请看下面这篇博客
https://www.cnblogs.com/zouwangblog/p/11141173.html