微信小程序之图片上传 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: 10rpx;
margin-bottom: 10rpx;
width: 100%;
height: 200rpx;
border: 1px solid #ccc;
}
.big-logos .big-logos_img {
float: left;
width: 100%;
height: 200rpx;
}
.big-logos .big-logos_img image {
float: left;
width: 250rpx;
height: 200rpx;
}



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


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
});
}
},

});

相关推荐