最近一段时间在做小程序项目,第一期功也完工了。需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑。今天写一个小程序实现图片上传,预览,以及删除,图片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
})
},

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

小程序实现图片上传,预览以及图片base64位处理的更多相关文章

  1. 前端实现图片上传预览并转换base64

    前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...

  2. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  4. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  5. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  6. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  7. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  8. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  10. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. SqlServer Bug:复制架构更改参数(replicate_ddl)无效

    原文:SqlServer Bug:复制架构更改参数(replicate_ddl)无效 最近测试可更新订阅的架构更改问题,发现了一个 bug. 在复制中,当在发布数据库对发布数据库进行架构更改时,结构自 ...

  2. no identifier specified for entity错误

    未给entity类添加主键造成. 之前出现这个错误是因为忘记给id添加@Id标签.

  3. linux 系统中将数据写入文档不能立即保存问题的解决方法

    应用场景: 设备跑的是Linux系统,与PC上位机进行通信,上位机可以给Linux发送设备配置信息,Linux将配置信息写入文件中以备设备断电重启时使用. bug现象: 设备正常运行,设备配置信息为A ...

  4. FMXUI中的三大杀器:TView、TLinearLayout、TRelativeLayout

    好了,今天我们来介绍下FMXUI中的三大杀器:TView.TLinearLayout.TRelativeLayout. [名词定义] 非布局组件: 组件名不是以Layout结尾的组件,Delphi自带 ...

  5. Qt VS版本添加调试器

    Qt的VS版本默认是不带调试器的,可以去百度一个WinDbg,如下图所示. 将其中的cdb.exe添加到Qt Creator构建和运行的Debuggers标签页即可,如下图所示. http://blo ...

  6. 如何让你的Sublime和Codeblocks支持C++11

    闲来没事看了一下C++11,比起C++0x多了很多新功能,像auto变量,智能指针等,g++4.7以上版本也提供了对C++11的支持,但是,如何在你的编辑器上执行C++11代码呢? 刚开始以为用法和以 ...

  7. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  8. PWN菜鸡入门之栈溢出(1)

    栈溢出 一.基本概念: 函数调用栈情况见链接 基本准备: bss段可执行检测: ​ gef➤ b main Breakpoint at . gef➤ r Starting program: /mnt/ ...

  9. php程序守护进程

    php命令程序实习守护进程2种方式: 1.使用nohup nohup php myprog.php > log.txt & 2.使用程序 function daemonize() { $ ...

  10. Maven版本管理-Maven Release Plugin插件

    一.什么是版本管理 首先,这里说的版本管理(version management)不是指版本控制(version control),但是本文假设你拥有基本的版本控制的知识,了解subversion的基 ...