本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法，分享给大家供大家参考，具体如下：
这里主要介绍一下微信小程序的图片上传图片删除和图片预览
1、可以调用相机也可以从本地相册选择
2、本地实现微信小程序的上传照片、预览照片的功能
3、利用wx.chooseImage方法
4、附带了一些表单样式（可以忽略）
代码如下
wxml文件
<view class="numberInfo">** 信息录入</view><view class="container"><view class="lineHeight" type="number">手机号<input class='input' placeholder='请输入手机号'></input></view><view class="lineHeight" type="text">姓名<input class='input-15' placeholder='姓名'></input></view><view class="lineHeight" type="text">公司名称<input class='input-7' placeholder='公司名称'></input></view><view class="lineHeight">公司电话<input class='input-7' type='number' placeholder='区号'></input></view><view class="lineHeight" type='number'>分机号码<input class='input-7' placeholder='公司分机号码（选填）'></input></view><view class="lineHeight" type="text"><!-- <input class='input-7'></input> --><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" bindtap='clearFont'>产品/服务 <text class='select' >{{placeholder}} {{array[index]}}</text></picker></view><view class="lineHeight" type="text"><!-- <input class='input-7' placeholder='请选择'></input> --><view class="section"><!-- <view class="section__title">省市区选择器</view> --><pickermode="region"bindchange="bindRegionChange"value="{{region}}"custom-item="{{customItem}}"><view class="picker">公司地址 <text class='select'>{{region[0]}}，{{region[1]}}，{{region[2]}}</text></view></picker></view> </view><view class="lineHeight" type="text">具体地址<input class='input-7' placeholder='具体地址'></ input></view></view><view class="weui-uploader"><view class="img-v weui-uploader__bd"><view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"><icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon></image></view><!-- 用来提示用户上传图片 --><view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view></view><button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照 / 上传</button></view>
css文件
/* pages/upload/upload.wxss */.img{display: inline-block;}.pic {float:left;position:relative;margin-right:9px;margin-bottom:9px;}.delete-btn{position: absolute;top: 0;right: 0;}.weui-uploader{padding: 10rpx;}.lineHeight {width: 100%;line-height: 80rpx;border-bottom: 1px solid #ccc;font-size: 30rpx;}.container {padding: 0;align-items: left;padding-left: 15rpx;}.numberInfo {font-size: 24rpx;text-indent: 15rpx;border-bottom: 1px solid #ccc;}/* .input {display: inline-block;border: 1px solid #ccc;line-height: 80rpx;vertical-align: middle;margin-left: 11%;width: 75%;} */.input,.input-7 ,.input-15{margin-left: 7%;display: inline-block;/* border: 1px solid #ccc; */line-height: 80rpx;vertical-align: middle;width: 75%;}.input{margin-left: 11%;}button {width: 100%;margin-top: 30rpx;}.select{margin-left: 7%;color: #666;}.input-15{margin-left:15%;}
js文件
// pages/upload/upload.jsPage({/*** 页面的初始数据*/data: {imgs: [],placeholder: '请选择',array: ['发电机', '充电器', '引擎动力', '其他'],objectArray: [{id: 0,name: '发电机'},{id: 1,name: '充电器'},{id: 2,name: '引擎动力'},{id: 3,name: '其他'}],multiIndex: [0, 0, 0],date: '-09-01',time: '12:01',region: ['广东省', '广州市', '海珠区'],customItem: '全部'},// 上传图片chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}// console.log(imgs);that.setData({imgs: imgs});}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},bindPickerChange(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},clearFont() {this.setData({placeholder: ''})},bindRegionChange(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
