一、点击选择图片/拍照

// 点击拍照/选择图片  choosePic() {    let that = this;    wx.chooseImage({      count: 1,      sizeType: ['original', 'compressed'],      sourceType: ['album', 'camera'],      success(res) {        // 将图片处理成base64        that.transformBase(res);      },      fail: function(res) {        console.log(res.errMsg)      }    })  },

二、将图片处理成base64

 transformBase(res) {    let that = this;    var FSM = wx.getFileSystemManager();    //循环将得到的图片转换为Base64    for (let r in res.tempFilePaths) {      // console.log(res.tempFilePaths[r])      FSM.readFile({        filePath: res.tempFilePaths[r],        encoding: "base64",        success: function(data) {          let Working = data.data;          that.getBase64ImageUrl(Working)        }      });    }  },

三、把base64转成图片路径显示在页面

 getBase64ImageUrl: function(res) {    /// 获取到base64Data    var base64Data = res;    /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64    base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));    /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求    let base64ImgUrl = this.data.base64ImgUrl;    let WorkingCard = this.data.WorkingCard;    //需要赋值的图片base64字段    let base64Url = "data:image/png;base64," + base64Data;    base64ImgUrl.push(base64Url);   //用来显示在页面上的base64路径（数组）    WorkingCard = base64Url;    // 获取文件(图片)MD5    let dealToMD5 = sMD5.hexMD5(base64Url);   //（var sMD5 = require('../../utils/common/spark-md5.js')）    /// 刷新数据    // console.log(base64ImgUrl, '===========')    this.setData({      isGetPicture: true,      base64ImgUrl: base64ImgUrl,      WorkingCard: WorkingCard,      WorkingCardMD5: dealToMD5    })  },

四、点击预览图片

 previewImage: function(e) {    var that = this,      //获取当前图片的下表      index = e.currentTarget.dataset.index,      //数据源      pictures = this.data.base64ImgUrl;    wx.previewImage({      //当前显示下表      current: pictures[index],      //数据源      urls: pictures    })  },

html部分

<cus-itemLine type="normal registerCard">     <view class="lineLeft">工作证</view>     <view class="lineCard">     <view class="delete" bindtap="deleteShopPhoto" wx:if="{{isGetPicture}}">         <view class="deleteBtn">           <image class="deleteIcon" src="../../images/deletePic.png"></image>         </view>       </view>       <image class="Icon" src="{{isGetPicture?base64ImgUrl[0]:'../../images/workPic.png'}}" bindtap="{{isGetPicture?'previewImage':'choosePic'}}" data-index="{{base64ImgUrl[0]}}"></image>     </view></cus-itemLine>

参考：https://blog.csdn.net/qq_38244984/article/details/82221151
https://blog.csdn.net/weixin_34128411/article/details/88120030
https://blog.csdn.net/gao_xu_520/article/details/72724008

原著是一个有趣的人,若有侵权,请通知删除