小程序上传图片和批量上传照片uploadFile,chooseImage--小程序走过的坑(4)-(最新版)

本文介绍如何使用微信小程序API选择本地相册图片或拍摄照片,并实现图片的批量上传功能。详细解释了wx.chooseImage方法的参数配置及使用场景,包括设置可选图片数量、图片类型、来源等选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

demo

wx.chooseImage

参数类型必填说明
countNumber最多可以选择的图片张数,默认9
sizeTypeStringArrayoriginal 原图,compressed 压缩图,默认二者都有
sourceTypeStringArrayalbum 从相册选图,camera 使用相机,默认二者都有
successFunction成功则返回图片的本地文件路径列表 tempFilePaths
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数类型说明最低版本
tempFilePathsStringArray图片的本地文件路径列表 
tempFilesObjectArray图片的本地文件列表,每一项是一个 File 对象1.2.0

 

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
  }
})

 批量上传照片代码

 

调用函数
   that.uploadimg({
       url: 'url', //这里是你图片上传的接口
       path: tempFilePaths, //这里是选取的图片的地址数组

   });


 
 uploadimg: function (data) {
    // console.log(data)
    var arr = [];
    var that = this,

      i = data.i ? data.i : 0,
      success = data.success ? data.success : 0,
      fail = data.fail ? data.fail : 0;
    if (data.path.length == 0) {
    //没有照片
    }else {
      wx.uploadFile({
        url: data.url,
        filePath: data.path[i],
        name: 'fileData',
        formData: null,
        success: (resp) => {
          // console.log(resp)
          success++;
          //这里可能有BUG,失败也会执行这里
        },
        fail: (res) => {
          fail++;
          // console.log('fail:' + i + "fail:" + fail);
        },
        complete: () => {
          // console.log(i);

          i++;
          if (i == data.path.length) {   //当图片传完时,停止调用          
            // console.log('执行完毕');
            // console.log(that.data.arr)
            // console.log('成功:' + success + " 失败:" + fail);


          } else {//若图片还没有传完,则继续调用函数
            // console.log(i);
            data.i = i;
            data.success = success;
            data.fail = fail;
            that.uploadimg(data);//继续执行
          }
        }
      })
    }
  }

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值