微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法，分享给大家供大家参考，具体如下：
这里主要介绍一下微信小程序的图片上传图片删除和图片预览
1、可以调用相机也可以从本地相册选择
2、本地实现微信小程序的上传照片、预览照片的功能
3、利用wx.chooseImage方法
4、附带了一些表单样式（可以忽略）
代码如下
wxml文件
** 信息录入 手机号 姓名 公司名称 公司电话 分机号码 产品/服务 {{placeholder}} {{array[index]}} 公司地址 {{region[0]}}，{{region[1]}}，{{region[2]}} 具体地址
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.js
Page({
/**
* 页面的初始数据
*/
data: {
imgs: [],
placeholder: '请选择',
array: ['发电机', '充电器', '引擎动力', '其他'],
objectArray: [
{
id: 0,
name: '发电机'
},
{
id: 1,
name: '充电器'
},
{
id: 2,
name: '引擎动力'
},
{
id: 3,
name: '其他'
}
],
multiIndex: [0, 0, 0],
date: '2016-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, // 默认9
sizeType: ['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 () {
}
})