微信小程序之图片上传 demo




index.html

< form bindsubmit= "formSubmit" id= '1' bindreset= "formReset">
< input style= 'display:none' name= 'program_id' value= '{{program_id}}'></ input >
< view class= 'caigou_centent'>描述说明(选填) </ view >
< view class= "big-logos">
< view class= 'big-logos_img'>
< image bindtap= "upimg" src= '/assets/images/01231564.png'></ image >
< image bindtap= "upimg" src= '/assets/images/01231564.png'></ image >
< image bindtap= "upimg" src= '/assets/images/01231564.png'></ image >
</ view >
< block wx:for= "{{img_arr}}" wx:key= "{{index}}">
< view class= 'logoinfo'>
< image src= '{{item}}'></ image >
</ view >
</ block >
</ view >
< button class= 'btn' formType= "submit">发布 </ button >
</ form >


index.wxss

.big-logos {
float: left;
margin-top: 10 rpx;
margin-bottom: 10 rpx;
width: 100%;
height: 200 rpx;
border: 1px solid #ccc;
}
.big-logos .big-logos_img {
float: left;
width: 100%;
height: 200 rpx;
}
.big-logos .big-logos_img image {
float: left;
width: 250 rpx;
height: 200 rpx;
}



.big-logos .logoinfo {
float: left;
width: 250 rpx;
height: 200 rpx;
margin-top: -196 rpx;
}
.big-logos .logoinfo image {
float: left;
width: 250 rpx;
height: 200 rpx;
}


index.js

var adds = {};
Page({
data: {
img_arr: [],
formdata: '',
},
formSubmit: function (e) {
var id = e.target.id
adds = e.detail.value;
adds.program_id = app.jtappid
adds.openid = app._openid
adds.zx_info_id = this.data.zx_info_id
this.upload()
},

upload: function () {
var that = this
for ( var i = 0; i < this.data.img_arr.length; i++) {
wx.uploadFile({
url: 'https:***/submit',
filePath: that.data.img_arr[i],
name: 'content',
formData: adds,
success: function (res) {
console.log(res)
if (res) {
wx.showToast({
title: '已提交发布!',
duration: 3000
});
}
}
})
}
this.setData({
formdata: ''
})
},
upimg: function () {
var that = this;
if ( this.data.img_arr.length < 3) {
wx.chooseImage({
sizeType: [ 'original', 'compressed'],
success: function (res) {
that.setData({
img_arr: that.data.img_arr.concat(res.tempFilePaths)
})
}
})
} else {
wx.showToast({
title: '最多上传三张图片',
icon: 'loading',
duration: 3000
});
}
},

});

猜你喜欢

转载自blog.csdn.net/L_15826810852/article/details/80068899