铁雪资源网 Design By www.gsvan.com
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码，供大家参考，具体内容如下
(一)、功能说明
做的是一个意见反馈，用户发表意见和上传图片，限制了最多只能上传三张图片。
其他要点：textarea使用，底部保存按钮固定
(二）、小程序接口说明
wx.chooseLocation(Object object)
从本地相册选择图片或使用相机拍照。
(三)、效果图
效果如下：
(四)、代码展示
WXML页面：
<view class="wrap">
<view class="contant_wrap">
<view class="contant">
<textarea name="bindTextAreaBlur" bindblur="bindTextAreaBlur" auto-height placeholder="请描述您的问题或意见(必填)" maxlength="600"/>
</view>
<view class="contant-pic">
<view class="pics-list" wx:for="{{pics}}" wx:key="" >
<image src="/UploadFiles/2021-04-02/{{item}}">
wxss页面：
page{
background-color: #efefef;
}
.wrap{
width:90%;
margin-left:5%;
margin-top:10px;
font-size:15px;
}
.contant_wrap{
background-color: #fff;
}
.contant{
width: 94%;
margin: 0 auto
}
textarea{
min-height:300rpx;
max-height: 300rpx;
padding: 10rpx 0;
width: 100%;
}
.contant-pic{
width: 94%;
margin: 0 auto;
height:80px;
}
.pics-list{
width:73px;
height:73px;
float:left;
margin-right:6px;
}
.uploadImg{
width:70px;
height:70px;
}
.uploadImg-error{
height:25px;
width:25px;
position:relative;
top:-80px;
left:55px;
}
.hideTrue {
display: none
}
.true {
display: block
}
input{
margin-top: 30rpx;
height: 80rpx;
padding-left: 20rpx;
background-color: #fff;
}
.placeholder{
color: #999999;
font-size: 12pt;
}
.bottom{
width:100%;
height:40px;
background-color:#e64340;
position:fixed; bottom:0;
color:#ffff;
text-align: center;
line-height: 40px;
}
js中：
// pages/advice/advice.js
Page({
/** 页面的初始数据*/
data: {
content:'',
phone:'',
name:'',
advice:'',
pics:[],
isShow: true
},
/**获取textarea值：评论内容 */
bindTextAreaBlur:function(e){
this.setData({
advice:e.detail.value
})
},
/**获取手机或邮箱*/
inputPhone: function (e) {
this.setData({
phone: e.detail.value
})
},
/**获取称呼 */
inputName: function (e) {
this.setData({
name: e.detail.value
})
},
/**上传图片 */
uploadImage:function(){
let that=this;
let pics = that.data.pics;
wx.chooseImage({
count:3 - pics.length,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
let imgSrc = res.tempFilePaths;
pics.push(imgSrc);
if (pics.length >= 3){
that.setData({
isShow: false
})
}
that.setData({
pics: pics
})
},
})
},
/**删除图片 */
deleteImg:function(e){
let that=this;
let deleteImg=e.currentTarget.dataset.img;
let pics = that.data.pics;
let newPics=[];
for (let i = 0;i<pics.length; i++){
//判断字符串是否相等
if (pics[i]["0"] !== deleteImg["0"]){
newPics.push(pics[i])
}
}
that.setData({
pics: newPics,
isShow: true
})
},
/**提交 */
submitAdvice:function(){
let that=this;
let advice = that.data.advice
let name=this.data.name
let phone=this.data.phone
let pics=this.data.pics
//保存操作
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无微信小程序实现图片选择并预览功能的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。