微信小程序实现上传图片功能[通俗易懂]

微信小程序实现上传图片功能[通俗易懂]效果图WXML<viewclass=”img-wrap”><viewclass=”txt”>上传截图</view><viewclass=”imglist”><viewclass=”item”wx:for=”{{imgs}}”wx:key=”item”><imagesrc=”{{item}}”alt=””></image><viewclass=’d

大家好,又见面了,我是你们的朋友全栈君。

效果图

微信小程序实现上传图片功能[通俗易懂]微信小程序实现上传图片功能[通俗易懂]微信小程序实现上传图片功能[通俗易懂]

WXML

<view class="img-wrap">
  <view class="txt">上传图片</view>
  <view class="imglist">
    <view class="item" wx:for="{ 
    {imgs}}" wx:key="item">
      <image src="{ 
    {item}}" alt=""></image>
      <view class='delete' bindtap='deleteImg' data-index="{ 
    {index}}">
        <image src="../../../images/icon.png"></image>
      </view>
    </view>
    <view class="last-item" wx:if="{ 
    {imgs.length >= 3 ? false : true}}" bindtap="bindUpload">
      <text class="sign">+</text>
    </view>
  </view>
</view>

JS

data: { 

imgs: [],
count: 3
},
bindUpload: function (e) { 

switch (this.data.imgs.length) { 

case 0:
this.data.count = 3
break
case 1:
this.data.count = 2
break
case 2:
this.data.count = 1
break
}
var that = this
wx.chooseImage({ 

count: that.data.count, // 默认3
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) { 

// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
for (var i = 0; i < tempFilePaths.length; i++) { 

wx.uploadFile({ 

url: 'https://graph.baidu.com/upload',
filePath: tempFilePaths[i],
name: "file",
header: { 

"content-type": "multipart/form-data"
},
success: function (res) { 

if (res.statusCode == 200) { 

wx.showToast({ 

title: "上传成功",
icon: "none",
duration: 1500
})
that.data.imgs.push(JSON.parse(res.data).data)
that.setData({ 

imgs: that.data.imgs
})
}
},
fail: function (err) { 

wx.showToast({ 

title: "上传失败",
icon: "none",
duration: 2000
})
},
complete: function (result) { 

console.log(result.errMsg)
}
})
}
}
})
},
// 删除图片
deleteImg: function (e) { 

var that = this
wx.showModal({ 

title: "提示",
content: "是否删除",
success: function (res) { 

if (res.confirm) { 

for (var i = 0; i < that.data.imgs.length; i++) { 

if (i == e.currentTarget.dataset.index) that.data.imgs.splice(i, 1)
}
that.setData({ 

imgs: that.data.imgs
})
} else if (res.cancel) { 

console.log("用户点击取消")
}
}
})
}

WXSS

.wrap { 

width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
}
.wrap .img-wrap { 

font-size: 30rpx;
color: #33373E;
margin-bottom: 10rpx;
}
.wrap .img-wrap .txt { 

margin-bottom: 20rpx;
}
.wrap .img-wrap .imglist { 

display: flex;
flex-wrap: wrap;
}
.wrap .img-wrap .imglist .item { 

width: 150rpx;
height: 150rpx;
margin-right: 22rpx;
margin-bottom: 10rpx;
position: relative;
}
.wrap .img-wrap .imglist .last-item { 

width: 150rpx;
height: 150rpx;
text-align: center;
line-height: 146rpx;
border: 2rpx dashed #8B97A9;
box-sizing: border-box;
}
.wrap .img-wrap .imglist .item image { 

width: 100%;
height: 100%;
}
.wrap .img-wrap .imglist .item .delete { 

width: 30rpx;
height: 30rpx;
position: absolute;
top: -14rpx;
right: -12rpx;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150595.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号