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

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

小程序实现图片上传,预览以及图片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
})
},

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/587060.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存