wxml
<form bindsubmit="formSubmit" id='2' bindreset="formReset">
<input style='display:none' name='program_id' value='{{program_id}}'></input>
<view class="big-logos">
<block wx:for="{{img_arr}}">
<!-- <view class='logoinfo'> -->
<image class='addimg' lass='addimg' src='{{item}}'></image>
<!-- </view> -->
</block>
<image bindtap="upimg" class='addimg' src='../images/author.jpg'></image>
</view>
<button class='btn' formType="submit">发布</button>
</form>
wxss
/* pages/demo/demo.wxss */
.big-logos{
width: 100%;
background: red;
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-content: space-around;
}
.addimg{
height: 230rpx;
width: 200rpx;
margin: 5rpx 10rpx;
}
wxjs
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()
},
uploader: function () {
var that = this;
let imagesList = [];
let maxSize = 1024 * 1024;
let maxLength = 3;
let flag = true;
wx.chooseImage({
count: 6, //最多可以选择的图片总数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 500
})
for (let i = 0; i < res.tempFiles.length; i++) {
if (res.tempFiles[i].size > maxSize) {
flag = false;
console.log(111)
wx.showModal({
content: '图片太大，不允许上传',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
});
}
}
if (res.tempFiles.length > maxLength) {
console.log('222');
wx.showModal({
content: '最多能上传' + maxLength + '张图片',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('确定');
}
}
})
}
if (flag == true && res.tempFiles.length <= maxLength) {
that.setData({
imagesList: res.tempFilePaths
})
}
wx.uploadFile({
url: 'https://shop.gxyourui.cn',
filePath: res.tempFilePaths[0],
name: 'images',
header: {
"Content-Type": "multipart/form-data",
'Content-Type': 'application/json'
},
success: function (data) {
console.log(data);
},
fail: function (data) {
console.log(data);
}
})
console.log(res);
},
fail: function (res) {
console.log(res);
}
})
},
//上传到服务器
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', //图片文件对应的参数名字(key)
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
});
}
},
})