本文实例为大家分享了微信小程序实现图片选择并预览的具体代码，供大家参考，具体内容如下

（一)、功能说明

做的是一个意见反馈，用户发表意见和上传图片，限制了最多只能上传三张图片。

其他要点：文本区域使用，底部保存按钮固定

（二)、小程序接口说明

选择位置（对象对象)

从本地相册选择图片或使用相机拍照。

（三)、效果图

效果如下：

（四)、代码展示

WXML页面：

view class=' wrap ' view class=' contant _ wrap ' view class=' contant ' textarea name=' BindTextareaBlur ' BindTextareaBlur=' BindTextareaBlur '自动高度占位符='请描述您的问题或意见（必填)' maxlength=' 600 '/view view class=' contant-pic ' view class=' pics-list ' wx : for=' { { pics } } ' wx : key=' ' image src=' http : { { item } } ' class=' uploadImg '/image src=' http : '././images/delete。png ' class=' uploadImg-error ' data-img=' { { item } } ' bind tap=' deleteImg '/image/view image src=' http :/./images/uploadImg。png ' class=' uploadImg { { isShow ' ' true ' : ' hide true ' } } ' bind tap=' uploadImage '/image/view/view class=' phone '输入名称=“输入电话”绑定输入=“输入电话”占位符='您的手机号或者邮箱（选填)'//view view class='phone '输入名称=“输入名称”绑定输入=“输入名称”占位符='您的称呼（选填)'//view view class=' bottom ' bind tap='提交建议'保存/view/viewwxss页面：

第{底色： # EFE fef}.包装{宽度：90%；左边距：5%;页边距-top :10 px；font-size :15 px}.contant _ wrap {底色： # fff}.内容{宽度： 94%；边距： 0 auto } textarea {最小高度：300 rpx最大高度： 300 rpxpadd : 10 rpx 0；宽度： 100%;}.content-pic { width : 94%；margin: 0自动高度：80 px}.pics-list { width :73 px；高度：73pxfloat:left右边距：6 px}.uploadImg { width:70px高度：70 px}.uploadImg-错误{高：25px宽度：25 px位置：相对；top :-80px；left:55px}。hideTrue { display: none} .true { display: block }输入{ margin-top : 30 rpx；高度： 80rpx左填充左： 20rpx背景-color : # fff；}.占位符{ color : # 999999 font-size : 12pt；}.底部{宽度：100%;高度：40 px背景-颜色： # e 64340位置：固定；底部：0;color: # ffff文本对齐：中心；线高： 40px}js中：

//页数/建议/忠告。js页面({/* *)页面的初始数据*/data: { content: ' '，phone: ' '，name: ' '，advice: ' '，pics:[]，isShow: true }，/**获取文本区域值：评论内容*/BindTextAraBlur : FuncTion(e){ this。setDATa({ advice : e . detail。value })}，/**获取手机或邮箱*/inputPhone:函数{这个。setdata({ phone : e . detail。value })}，/**获取称呼*/inputName:函数{这个。setdata({ name : e . detail。value })}，/**上传图片*/uploadimage : function(){ 0让那个=这个；让pics=那个。数据。图片；wx。选择图像({ count :3-pics。长度，sizeType: ['原始'，'压缩']，sourceType: ['相册'，'相机']，success : function(RES){ let imgSrc=RES . tempfile path；照片。push(IMgsrc)；if(图片。长度=3){那个。setdata({ isshow : false })表示。setdata({ pics : pics })}，})}，/**删除图片*/deleteimg :函数(e){让那个=这个；让删除img=e . CurrentTarget。数据集。img让pics=那个。数据。图片；让新pics=[]；用于(设I=0；ipics.lengthi ){ //判断字符串是否相等if (pics[i]['0']！==deleteImg[' 0 ']){新图片。推(图片[我])} }那个。setdata({ pics :新pics，isShow: true }) }，/**提交*/Submit advice : FuncTion(){ let that=this；让建议=那个。数据。建议让name=this.data.name让电话=这个.数据.电话让pics=this.data.pics /保存操作}})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。