微信小程序上传图片 预览 删除

①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key='index'><image class="show-image" src="{{item}}" bindtap="previewImage" data-url='{{item}}'></image><text bindtap="clearimg" class="iconfont icon-lajixiang col-7" data-index='index'></text></view><view class='item' bindtap='clickImg'></view><view class='footerEditRight'>添加图片</view></view>

②.jsdata: {src:[],},// 点击添加图片clickImg() {const _this = this;wx.chooseImage({count: 9,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {// 添加图片var imgList = _this.data.src.concat(res.tempFiles[0].path);if(_this.data.src.length>8){console.log(1)}else{_this.setData({src: imgList}, () => {// 回调成功})} }})},// 点击图片预览previewImage: function (e) {var _this = this;var current = e.currentTarget.dataset.urlwx.previewImage({current: current, // 当前显示图片的http链接urls: _this.data.src // 需要预览的图片http链接列表})}, // 点击删除图片clearimg(e) {var _this = this;var images = _this.data.src;var index = e.currentTarget.dataset.indeximages.splice(index, 1);_this.setData({src: images}, () => {// 回调成功console.log(_this.data.src)})},

博主也是刚接触微信小程序不久 ，希望和小伙伴共同学习 共同努力。

如有不全 请留言博主肯定第一时间来进行更新和改写