微信小程序上传图片(可多张)

使用方式

1.复制封装方法到小程序js中

2.修改对应参数名称

3.调用。

注意1:

url:自己的服务端接口地址

name:自己服务器定义的参数名称,一般为file,这里用的pic

注意2:

调用方式:

this.uploadimg({

      url: app.globalData.URL + '/aa/aaaa',//接口地址

      title: title,//其他参数,其他参数在封装方法中的formData里赋值

      pics: this.data.fileList,

    });

封装方法():

uploadimg: function(data) {

    var that = this,

      i = data.i ? data.i : 0, //当前上传的哪张图片

      success = data.success ? data.success : 0, //上传成功的个数

      fail = data.fail ? data.fail : 0; //上传失败的个数

    wx.uploadFile({

      url: data.url,

      filePath: data.pics[i],

      name: 'pic', //这里根据自己的实际情况改

      formData: {

        'title': data.title,

        'i': i,

      }, 

      //这里是上传图片时一起上传的数据

      success: (resp) => {

        success++; //图片上传成功,图片上传成功的变量+1

        console.log(resp)

      },

      fail: (res) => {

        fail++; //图片上传失败,图片上传失败的变量+1

        console.log('fail:' + i + "fail:" + fail);

      },

      complete: () => {

        console.log(i);

        i++; //这个图片执行完上传后,开始上传下一张

        if (i == data.pics.length) { //当图片传完时,停止调用   

          console.log('执行完毕');

          console.log('成功:' + success + " 失败:" + fail);

          wx.hideLoading();

          if (data.pics.length == success) {

            wx.showToast({

              title: '感谢您的建议',

              duration: 2000

            })

            // setTimeout(function() {

            //   //返回上一级关闭当前页面

            //   wx.navigateBack({

            //     delta: 1

            //   })

            // }, 500)

          }

        } else { //若图片还没有传完,则继续调用函数

          console.log(i);

          data.i = i;

          data.success = success;

          data.fail = fail;

          that.uploadimg(data);

        }

      }

    });

  },

你可能感兴趣的:(微信小程序)