小程序實現圖片上傳，預覽以及圖片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
    })
  },

每天進去一點點，好好總結經驗