微信端、PC端通过base64上传图片

1、微信端上传图片

// 调起微信上传图片
uploadImgWx(){
   var that = this;
   wx.chooseImage({
       count: 9, // 默认9
       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
       success: function (res) {
           var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
           var realLocalIds = localIds.toString().split(',');
           
           for(var i=0;i< realLocalIds.length;i++){
               that.imgLiList2.push(realLocalIds[i]);  // 预上传图片列表
               wx.getLocalImgData({
                   localId: realLocalIds[i], // 图片的localID
                   success: function (res) {
                       var localData = res.localData; //localData是图片的base64数据，可以用img标签显示
                       
                       var u = navigator.userAgent;
                       var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                       var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                       
                       if(isAndroid){
                           var resultStr = localData.replace(/[\r\n]/g, ""); //去掉回车换行
                           that.imgUrlEqp.push(resultStr);
                       }else{
                           that.imgUrlEqp.push(localData.split(',')[1])
                       }
                   }
               })
           }
       }
   })
}

2、PC上传图片

//pc端上传图片
uploadImgPc(e){
   var that = this;
   var files = e.target.files; //获取图片
   var file = files[0];
   if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) { // 接受 jpeg, jpg, png 类型的图片
       return;
   }
   var reader = new FileReader();
   reader.onload = function (e) {
       var resultBe = e.target.result;  //图片base64字符串、去掉回车换行
       that.imgliList2.push(resultBe);  // 预上传图片列表
       
       var result = resultBe.split(",")[1];
       that.imgUrlEqp.push(result);
   }
   reader.readAsDataURL(file);    //Base64
}

3、上传到服务器

sureUploadImg(){
  var that = this;
  if(that.imgUrlEqp.length == 0){
      loadData("show","请先上传图片！",true);
      return false;
  }else{
      $.ajax({
          url: tmsUrl + "/wx/save/orderItemImage?token="+that.logininf.token+"&timeStamp="+that.logininf.timeStamp+"&orderItemId="+that.omOrderItemId,
          type: "post",
          data: JSON.stringify(that.imgUrlEqp),
          contentType: 'application/json',
          success: function(data) {
              loadData("show","保存成功！",true);
              
              that.imgliList2 = [];
              that.imgUrlEqp = [];
			  that.imgliList = [];
			  
              for(var i=0;i<data.result.length;i++){
                  var item = data.result[i];
                  
                  that.imgliList.push({ //上传成功图片列表显示
                      src: ImgWebsite+item.extValue,
                      extId: item.omExtId
                  })
              }
          },
          error: function(){
              loadData("show","上传图片失败，请稍后再试！",true)
          }
      })
  }
}

4、微信端图片展示

5、PC端图片展示