zoukankan      html  css  js  c++  java
  • 小程序实现图片上传,预览以及图片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
        })
      },

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

  • 相关阅读:
    leetcode:655. 输出二叉树
    leetcode:763. 划分字母区间
    leetcode:3. 无重复字符的最长子串
    leetcode:2. 两数相加
    leetcode每日一题:409. 最长回文串
    leetcode:1381. 设计一个支持增量操作的栈
    leetcode:1380. 矩阵中的幸运数
    [数据结构] 迷宫问题(栈和队列,深搜和广搜)
    [数据结构] N皇后问题
    [2011山东ACM省赛] Sequence (动态规划)
  • 原文地址:https://www.cnblogs.com/zhoulifeng/p/11211368.html
Copyright © 2011-2022 走看看