小程序实现图片上传,预览以及图片base64位处理-阿里云开发者社区

开发者社区> 小周sir> 正文

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

简介: 小程序实现图片上传,预览以及图片base64位处理
+关注继续查看


最近一段时间在做小程序项目,第一期功也完工了。需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑。今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理。下面就是展示的效果

 63f1dbc07b0b3222983643970614c7d9.png

1页面布局

  <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>


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
})

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7623 0
【降价信息】云HBase X-Pack最高降价31%,再次释放大数据处理红利
阿里云中国站云HBase X-Pack中的Spark服务将于2019年7月16日进行价格下调。
696 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
610 0
flash版本更新导致shopex后台上传图片无效的问题
4.8.4~4.8.5版本好像都有这个问题,下面是官方bbs上找到的补丁包,通过ftp上传覆盖就行了 文件清单文件名          文件路径:                                  说明component.
763 0
kbmmw 与extjs 通过JSON Base64 显示图片
delphi 官网上开始也来越多的介绍delphi与extjs 结合的例子,今天我就把官方的例子翻版一下。 官方使用C++builder 和webbroker 实现。 我使用kbmmw 来实现一下。
989 0
手把手的numpy入门教程,从此数据处理不再慌
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 首先我们来看数组重塑,所谓的重塑本质上就是改变数组的shape。在保证数组当中所有元素不变的前提下,变更数组形状的操作。
680 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
50
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载