小程序上传图片及预览图片 - 会coding的HAM

小程序上传图片及预览图片

BG7ZAG

|

2018-2-13 22:05

|

1,968

|

0

|

379 字

|

2 分钟

小程序上传图片及预览图片

wxml代码：

<view class='upImgTips' wx:if="{{previewImage != ''}}">点击预览图片，长按删除图片</view>
<view class='img'>
<view class='img_li' bindtap='upload_img'>
<text class='iconfont icon-zhaoxiangji'></text>
</view>
<view class='img_li' wx:for="{{previewImage}}" wx:key="{{index}}">
<image bindtap='previewImage' bindlongpress='delImage' data-index="{{index}}" data-src='{{item}}' src='{{item}}' mode='widthFix'></image>
</view>
</view>

wxss代码：

.img {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.img_li {
width: calc((100vw - 50px) / 4);
height: calc((100vw - 50px) / 4);
border: 1px dashed #4da585;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
line-height: calc((100vw - 50px) / 4);
border-radius: 5px;
overflow: hidden;
}
.img_li:nth-child(4n) {
margin-right: 0;
}
.img_li image {
width: 100%;
}
.recorder {
margin: 10px 0;
}
.upImgTips {
font-size: 25rpx;
margin-bottom: 10px;
}

js代码：

data: {
previewImage:[], // 预览图片地址
},
// 上传图片
upload_img:function(){
let that = this;
wx.chooseImage({
// count: 1, //最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
let previewImage = that.data.previewImage;
// console.log(res)
for (let i = 0; i < res.tempFilePaths.length;i++){
previewImage.push(tempFilePaths[i]);
}
// console.log(previewImage)
that.setData({
previewImage: previewImage
})
}
})
},
// 预览图片
previewImage:function(e){
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表
})
},
// 长按删除图片
delImage:function(e){
// console.log(e.currentTarget.dataset.index)
let _index = e.currentTarget.dataset.index;
let previewImage = this.data.previewImage;
console.log(previewImage)
previewImage.splice(_index,1);
this.setData({
previewImage: previewImage
})
},

上传图片小程序预览图片

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!