这里是文章模块栏目内容页
wx.chooseImage和 wx.uploadFile小程序API实现相册图片上传

多图上传在小程序里面需要借助wx的api功能 wx.chooseImage来实现:此API的功能具备从相机或者拍照获取图片,它的主要参数这样设置:

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths  }})


count参数指定一次最多可以选择几张图片,count最多9张。

sizeType参数:指定上传原图或者 压缩图片上传,在小程序内通常采用compresed 压缩方式,因为可以减少用户流量,一般相机保存的图片都有4-6M大小,采用压缩图片上传可以提高速度,也能让用户更放心的使用你的小程序;

success成功选择图片返回后回调函数:这里写把图片上传到你的后台服务器接口上;


下面来看看具体的应用场景代码:

把传一张图片到后台接口的的代码实现:

  //多张图片上传
  uploadimg: function (data) {
    var self = this,
      i = data.i ? data.i : 0,//当前上传的哪张图片
      success = data.success ? data.success : 0,//上传成功的个数
      fail = data.fail ? data.fail : 0;//上传失败的个数
    /**显示进度条 */
    self.setData({ show_progress: 1, progress_per: 0 });
    /**调用接口上传 */
    let uploadUrl = app.util.url('entry/wxapp/transfile', { m: 'kbwdl_piaopiaozu' });

   const uploadTask = wx.uploadFile({
      url: uploadUrl,
      filePath: data.path[i],
      name: 'upfile',
      formData: {},
      success: function (resp) {
        //resp 的data 从您的上传api返回 数据:图片相对路径#图片绝对路径 的格式。
        success++;     
        let url = resp.data;
        let path = url.split('#');
        let form_image_paths = self.data.form_image_paths;
        self.setData({
          form_image_paths: form_image_paths.concat(path[0])
        });
        //这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
      },
      fail: function (res) {
        fail++;//图片上传失败,图片上传失败的变量+1
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: function () {

        i++;//这个图片执行完上传后,开始上传下一张
        if (i == data.path.length) {   //当图片传完时,停止调用          
          console.log('执行完毕');
          self.setData({ isupend: true });//全部上传完可以删除已经上传的         
          console.log('成功:' + success + " 失败:" + fail);
        } else {//若图片还没有传完,则继续调用函数           
          data.i = i;
          data.success = success;
          data.fail = fail;
          self.uploadimg(data);
        }

      }
    });
    /** */
    uploadTask.onProgressUpdate((res) => {
      if (res.progress < 100) {
        self.setData({ show_progress: 1, progress_per: res.progress })
      } else {
        self.setData({ show_progress: 0 })
      }
 
    })
  },
app.util.url('entry/wxapp/TransVideo', { m: 'kbwdl_piaopiaozu' });

 是一个封装好的 ,生成后台api地址的函数而已。您可以按自己的api  代替这个。

下面是 选择相机或者拍照后返回success 调用 上面的 uploadimg 函数:

  /**多图片一次多张上传 */
  uploadImages: function () {
    const self = this;

    let selected = self.data.tempFilePaths;

    wx.chooseImage({
      count: 9,
      success: function (res) {
        var imgsrc = res.tempFilePaths;
        selected = selected.concat(imgsrc)
        self.setData({
          tempFilePaths: selected,
          isupend: false,
        });
        var transfile = {};
        transfile.path = imgsrc;
        self.uploadimg(transfile);
      },
    });
    /** */
  },

 wx.uploadFile 是微信小程序是API ,实现了上传功能,它返回一个 uploadTask对象,表示一个上传进度

,用它来显示图片的上传进度。wx.choseImage 会执行count次 success 回调函数,即选择了几张图片就有几个成功回调。所以它执行了count次 uploadimg。(count的次数 按每次选择上传的图片具体数量定,参数设置的count是最大一次上传数。)


本文内容全部结束,感谢您的阅读,希望能对你有所帮助!