网站首页 php及前端 微信小程序上传图片代码
微信小程序上传图片代码
编辑时间:2019-05-12 作者:金满斗 浏览量:92 来源:原创

以前写的,今天搞个别的需要,翻出来.直接上代码吧.


/*上传图片,按键方法*/
  chooseImage: function (e) {
    let that = this;
    let imgfiles = that.data.files;
    console.log(imgfiles.length);
    wx.chooseImage({
      count: 5 - imgfiles.length,    //最多选取5张,这里微信后台会控制
      sizeType: ['compressed'], // 传压缩图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        let imgsrc = res.tempFilePaths;
       // imgfiles = imgfiles.concat(imgsrc);
       
        that.uploadimg({
          url: App.uploadimgRoot,              //这里是你图片上传的接口
          path: imgsrc                         //这里是选取的图片的地址数组
          });   //多张图上传到服务器
        //that.upload(that, res.tempFilePaths);          /*上传到服务器*/
       
      }
    })
   
  },
  //预览按钮回调
  previewImage: function (e) {
    let _this = this;
    let data = _this.data.files;
    let imgurls = [];
    for (var i = 0; i < data.length; i++) {
      imgurls = imgurls.concat(data[i].file_path);
    }
    wx.previewImage({
      urls: imgurls // 需要预览的图片http链接列表
    })
  },

 

  //多张图片上传
  uploadimg: function(data){
    wx.showToast({
      icon: "loading",
      title: "正在上传"
    });
    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.path[i],
      name: 'iFile',//这里根据自己的实际情况改
      header: { "Content-Type": "multipart/form-data" },
      formData: {
        group_id: 3,    //这里后台都传到文章图片类了
        wxapp_id: App.siteInfo.uniacid
      },
      success: (resp) => {
        let res = JSON.parse(resp.data);
        if(res.code==1){
          success++;//图片上传成功,图片上传成功的变量+1
          let imgfile = res.data;
          that.setData({
            files: that.data.files.concat(imgfile)     //上传成功后本地加图片
          });
        }
      },
      fail: (res) => {
        fail++;//图片上传失败,图片上传失败的变量+1
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        
        i++;//这个图片执行完上传后,开始上传下一张
        if (i == data.path.length) {   //当图片传完时,停止调用          
          wx.hideToast();  //隐藏Toast
          //console.log('执行完毕');
          //console.log('成功:' + success + " 失败:" + fail);
        } else {//若图片还没有传完,则继续调用函数
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);    //递归调用上传
        }
      }
    });
  },


来说两句吧