小程序实现图片上传，预览以及图片base64位处理

小程序实现图片上传，预览以及图片base64位处理

最近一段时间在做小程序项目，第一期功也完工了。

需要好好总结一下经验，把项目中遇到的问题好好总结一下，遇到的问题，踩过的坑。

今天写一个小程序实现图片上传，预览，以及删除，图片base64位处理。

下面就是展示的效果

1页面布局

<view class='question-images'>

      <view class='images-wrap'>

      <block wx:for="{{imagesList}}" wx:key="id">

        <view class='images-list' wx:if="{{imagesList.length > 0}}" >

          <image class='images-item' src='{{item}}' bindtap="handleImagePreview" mode="aspectFill" data-index="{{index}}"></image>

          <view class='image-remover' bindtap="removeImage" data-index="{{index}}">X</view>

        </view>

      </block>

        <!-- 上传图片按钮 -->

        <view class='images-list images-btn' bindtap='chooseImage' wx:if="{{imagesList.length < 1}}">

          <image class='btn-item' src='/assets/images/camera.png'></image>

          <text class='add'>添加图片</text>

        </view>

      </view>

    </view>

  </view>

2.给上传图片绑定一个事件chooseImage，用于事件触发,在data中定义一个数组。

imagesList用于图片存储,baseImg单独存base64位图片的

chooseImage(e){

    const that = this;

    // let baseImg = that.data.baseImg;

    wx.chooseImage({

      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片

      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机

      success: function(res) {

        //拿到图片地址

        const imagesList = that.data.imagesList.concat(res.tempFilePaths);

        that.data.imagesList = imagesList.length <= 1 ? imagesList : imagesList.slice(0, 1);

        //图片base64位

        wx.getFileSystemManager().readFile({

          filePath: res.tempFilePaths[0], //选择图片返回的相对路径

          encoding: 'base64', //编码格式

          success:(res) =>{

            let baseImg = 'data:image/png;base64,' + res.data

            that.data.baseImg = baseImg

          }

        })

        that.setData({

          imagesList

        })

      }

    })

  },

上面小程序自己提供api方法，哪里直接用，根据自己的需求进行修改

that.data.imagesList = imagesList.length <= 1 ? imagesList : imagesList.slice(0, 1);  限制只上传一张图片，可以根据自己的需要进行修改

　图片处理base64位，直接调用小程序自带的wx.getFileSystemManager就可以

　3.图片实现预览功能，直接上代码，也是调用下程序官网api的

handleImagePreview(e){

    //预览图片

    const idx = e.target.dataset.idx;

    const imagesList = this.data.imagesList;

    wx.previewImage({

      current: imagesList[idx],  //当前预览的图片

      urls: imagesList,  //所有要预览的图片

    })

  },

4.图片删除功能

removeImage(e){

    //删除单个图片

    let _this = this;

    let index = e.target.dataset.index;

    let images = _this.data.imagesList;

    images.splice(index, 1)

    _this.setData({

      imagesList: images

    })

  },

每天进去一点点，好好总结经验