微信小程序图片上传和预览以及取消上传图片案例

前言：

做小程序项目遇到一个需求，就是上传图片和预览，以及取消指定的图片，其实这个功能挺好搞的，借助微信官方的API结合实现，只不过注意一点细节。不多说了直接上代码和效果图。大家可以直接复制我的代码进行实现功能。

效果图：

代码：

wxml代码：

<view class="container"><view class="uploadContainer"><!-- 图片预览区域 --><view class="imgContainer"><view class='imageInfo' wx:for="{{imgs}}" wx:for-item="item"  wx:key="*this"><image src="{{item}}"data-index="{{index}}"mode="aspectFill" bindtap="previewImg"><icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon></image></view></view><!-- 备注 --><view class="page-section"><view class="weui-cells__title note">提示:图片最多上传8张,点击X可以取消上传图片</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_input noteContent"><textarea disabled="{{inputDisable}}" bindinput="checkInput" placeholder="作品备注" maxlength="101" placeholder-style="color:grey;"/></view></view></view><button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button><button class="upload-img-btn" bindtap="sureUpload" type='warn'>上传</button></view>
</view>

wxss代码:

.container {padding: 0;align-items: left;padding-left: 8rpx;
}
.uploadContainer{padding: 10rpx;width: 100%;height: 620rpx;
}
.imgContainer{width: 100%;height: 370rpx;padding: 2rpx;
}
.page-section{width:100%;height: 250rpx;
}
.page-section .note{height: 30rpx;font-size: 30rpx;font-weight: bold;color: red;margin-bottom: 10rpx;
}
.noteContent{width: 98%;border:2rpx solid #ccc;height: 200rpx;padding: 0 5rpx;border-radius: 5rpx;box-shadow: 2rpx;margin-top: 5rpx;
}
.noteContent textarea{width: 100%;height: 100%;overflow: hidden;
}
.imageInfo {
float:left;
position:relative;
border: 1rpx solid #ccc;
border-radius: 2rpx;
width: 23%;
height: 175rpx;
margin: 2rpx 6rpx;
}
.imageInfo image{width: 100%;height: 100%;
}
.delete-btn{position: absolute;top: 0;right: 0;
}
button {width: 100%;margin-top: 10rpx;
}

js代码：

// pages/uploadMessage/uploadMessage.js
Page({/*** 页面的初始数据*/data: {imgs: [],inputDisable:false},//选择图片chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 8) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({count: 8, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 8) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}// console.log(imgs);that.setData({imgs: imgs});}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},//检查字数checkInput:function(e){var that=this;if(e.detail.value.length>=100){wx.showToast({title: '备注不能超过100个字',icon:"none",duration:2000})}},//上传到后台sureUpload:function(e){var imgList=this.data.imgs;if(imgList.length>8){wx.showToast({title: '上传的图片不能超过8张',icon: 'none',duration: 2000})return false;}wx.showModal({title: '上传作品',content: '确定上传？',success(res) {if (res.confirm) {wx.showLoading({title: '正在上传',mask:true})setTimeout(function () {wx.hideLoading()wx.showToast({title: '上传成功',icon:"success",duration:2000})}, 4000)} else if (res.cancel) {console.log('用户点击取消')}}})},bindPickerChange(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},clearFont() {this.setData({placeholder: ''})},bindRegionChange(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})}
})

结尾：

分享：努力不需要仪式感！！

微信小程序图片上传和预览以及取消上传图片案例相关推荐

**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序图片上传到服务器再自动替换,微信小程序批量上传图片到服务器，并实现预览，删除功能...
js代码 Page({ /** 页面的初始数据 / data: { files: [], //门店图片信息,数组图片保存作为数据源 }, /* 多图片上传 */ chooseImage: functi ...
微信小程序-图片上传
微信小程序有原生的API接口,来进行图片的选取.上传 wx.chooseImage(Object object) | 微信开放文档 (qq.com)https://developers.weixin. ...
C#实现微信小程序图片上传
C#后端接口: public string FileUploads() {string parameters = "";try{string path = "/tmp/& ...
微信小程序图片上传（文字识别）
要点:OCR文字识别图片上传在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
微信小程序图片上传到java后台
前言关于云存储的文件上传,我想说的真的挺多的,这是一篇纯原创的基于小程序或者是SpringBoot的云存储的全过程. 整篇教学很细很细,适合于所有的java学习者,特别是刚刚结束学习java想要练 ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...

微信小程序图片上传和预览以及取消上传图片案例

微信小程序图片上传和预览以及取消上传图片案例相关推荐

最新文章

热门文章