微信小程序上传多张图片，级小程序页面布局直接来代码index.wxml
<view class='body' style='width:{{windowWidth}}px;height:{{windowHeight}}px;'>
<view style='padding:40rpx;'>
<text class='ttile'>请填写您的意见</text>
</view>
<view class='inp_1'>
<view class="inp_name inp">
<input class='input input_name'placeholder="我的姓名" bindblur="get_name" disabled='{{is_anonymous}}' value='{{is_anonymous?"":name.value}}' type="text" id='name' />
</view>
<view class="inp_phone inp">
<input class='input input_name' id='phone'disabled='{{is_anonymous}}' value='{{is_anonymous?"":phone.value}}' bindblur="get_phone" placeholder='联系电话' type="number" />
</view>
</view>
<view style='height:130rpx;width:90%;margin:0 auto;'>
<view class="body-view" style='float:right;margin-top:30rpx;'>
<label for='is_anonymous'>
<view class="weui-cells__title" style='float:left;margin-right:20rpx;'>匿名举报</view>
</label>
<switch bindchange="switch1Change" id='is_anonymous' bindchange="is_anonymous"/>
</view>
</view>
<view style='padding:30rpx;'>
<text class='ttile'>举报详情</text>
</view>
<textarea value='{{textarea}}' class='text' maxlength="2000" bindblur="get_textarea"></textarea>
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view style='padding:30rpx;'>
<text class='ttile'>上传附件</text>
</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__file">
<image class="weui-uploader__img" wx:for="{{imagesList}}" src="{{item}}"></image>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="" bindtap='uploader' name="images"></view>
</view>
</view>
</view>
<button type='primary' bindtap='submit'>提交</button>
</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
max:-1,
productInfo: {},
titleCount: 0,
contentCount: 0,
title: '',
content: '',
images: '' ,
upload_picture_list: [],
imagesList:[]
, img:'/images/up.png',
file:'',
is_anonymous: false,
name:'',
phone:'',
textarea:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
// 屏幕宽度、高度
console.log('height=' + res.windowHeight);
console.log('width=' + res.windowWidth);
// 高度,宽度 单位为px
that.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
})
}
})
},
get_name:function(e){
console.log(e.detail);
var that=this;
if (!that.data.is_anonymous) {
if (e.detail.cursor > 4) {
wx.showToast({
title: '姓名不能超过四个字符',
icon: 'none',
duration: 2000
});
}
}
that.setData({
name: e.detail
});
},
get_phone: function (e) {
console.log(e.detail);
var that = this;
if (!that.data.is_anonymous) {
if (e.detail.cursor !== 11) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 2000
});
}
}
that.setData({
phone: e.detail
});
},
is_anonymous:function(e){
console.log(e.detail);
var that = this;
that.setData({
is_anonymous: e.detail.value
});
},
get_textarea:function(e){
console.log(e.detail);
var that = this;
that.setData({
textarea: e.detail.value
});
},
uploader: function () {
var that = this;
let imagesList = [];
let maxSize = 1024 * 1024;
let maxLength = 6;
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
})
}
console.log(res);
},
fail: function (res) {
console.log(res);
}
})
},
submit: function (res) {
console.log(res);
var that = this;
if (!that.data.is_anonymous){
if (that.data.name.cursor>4){
wx.showToast({
title: '姓名不能超过四个字符',
icon: 'none',
duration: 2000
});
return false;
}
if (that.data.phone.cursor!==11) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 2000
});
return false;
}
}
if (that.data.textarea.length<1) {
wx.showToast({
title: '请输入举报详情！',
icon: 'none',
duration: 2000
});
return false;
}
var id=false;
wx.showLoading({
title: '上传中...',
})
wx.request({
url: 'https://www.top/index.php/api/index/index',
method: 'post',
data: {
name: that.data.name.value,
phone: that.data.phone.value,
is_anonymous: that.data.is_anonymous,
textarea: that.data.textarea
}, success: function (res) {
console.log(res);
if (res.data.success){
id = res.data.id;
for (let i = 0; i < that.data.imagesList.length; i++) {
wx.uploadFile({
url: 'https://www.top/index.php/api/index/upload.html?id=' + id,
filePath: that.data.imagesList[i],
name: 'uploadfile_ant',
header: {
"Content-Type": "multipart/form-data"
// 'Content-Type': 'application/json'
},
success: function (data) {
if ((that.data.imagesList.length - 1)==i){
wx.hideLoading();
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
that.setData({
imagesList: []
, img: '/images/up.png',
file: '',
is_anonymous: false,
name: '',
phone: '',
textarea: ''
});
setTimeout(function () {
wx.navigateTo({
url: '../success/success',
})
}, 2000)
}
},
fail: function (data) {
console.log(data);
}
});
}
}
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxss"
.body {
background: #f6f6f6;
}
.title {
position: relative;
top: 60rpx;
text-align: center;
}
.text {
margin: 0 auto;
width: 90%;
height: 250rpx;
border: 1rpx solid rgb(167, 161, 161);
border-radius: 6rpx;
background-color: #ffffff;
}
button {
line-height: 80rpx;
width: 80%;
height: 80rpx;
margin-top: 40rpx;
position: relative;
}
page {
background: #f6f7f8;
}
.question-form {
margin: 25rpx;
}
.question-input-area {
background-color: #fff;
border: 1rpx solid #f2f2f2;
border-radius: 4rpx;
}
.question-title-wrap {
display: flex;
align-items: center;
border-bottom: 1rpx solid #ccc;
margin: 10rpx 30rpx;
padding: 20rpx 0;
}
.question-title {
flex: 1;
}
.weui-textarea-counter, .title-input-counter {
color: #b3b3b3;
font-size: 14px;
padding-left: 10rpx;
}
.weui-cell::before, .weui-cells::before, .weui-cell::after, .weui-cells::after {
border: none;
}
.question-images-area {
padding: 40rpx 0;
}
.question-images-tool {
display: flex;
align-items: center;
}
.question-images {
display: flex;
align-items: center;
margin-top: 40rpx;
}
.q-image-wrap {
width: 31%;
margin-right: 10rpx;
}
.q-image {
flex: 1;
height: 200rpx;
width: 100%;
}
.q-image-remover {
text-align: center;
}
.weui-uploader__file image {
width: 30%;
height: 192rpx;
padding: 10rpx;
margin-bottom: 10rpx;
}
.weui-uploader__bd {
width: 85%;
height: auto;
margin: 0 auto;
background-color: #fff;
padding: 20rpx;
}
.js_file {
background: url('https://www.gdzhisheng.top/xqxcz/public/weixin/up.png') no-repeat;
width: 160rpx;
height: 155rpx;
}
.weui-uploader__file {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#name{
height: 40rpx;
}
.inp_1{
width:85%;
margin:0 auto;
background-color:#ffffff;
padding:20rpx;
}
.inp{
padding:20rpx;
}
.inp_name{
border-bottom:solid #e0dddd 1rpx;
}
.label{
width:30%;display: inline-block;
}
.input{
width:80%;
display: inline-block;
}
#is_anonymous{
/* width: 80rpx;
height: 80rpx; */
}
.ttile{
font-family:'微软雅黑';
font-size: 34rpx;
color: #6b6a6a;
}
.wx-switch-input{
width:78rpx !important;
height:44rpx !important;
/* background: #50D2C2 !important;
border: #50d2c2 !important; */
/* 2018-07-18 重置开关边框颜色 */
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
width:76rpx !important;
height: 40rpx !important;
}
/*绿色样式（true的样式）*/
.wx-switch-input::after{
width: 36rpx !important;
height: 40rpx !important;
}
为了完成现有的任务，一些功能还没有实现，比如图片删除的功能
php后台处理图片代码
public function upload(){
$file=$_FILES['uploadfile_ant'];
$dir='upload/weixin/'.date("Ymd").'/';
$filename=$dir.md5(microtime(true)).'.'.explode('.',$file['name'])[count(explode('.',$file['name']))-1];
if(!file_exists($_SERVER['DOCUMENT_ROOT'].$dir)){
mkdir($_SERVER['DOCUMENT_ROOT'].$dir,0777,true);
}
if(move_uploaded_file($file['tmp_name'],$_SERVER['DOCUMENT_ROOT'].$filename)){
$info=Db("infomation")->where(['id'=>input('id')])->value('picture');
if($info==""||$info==null){
$data['picture']=$filename;
}else{
$data['picture']=$info.$filename;
}
Db::startTrans();
$res=Db("infomation")->where(['id'=>input('id')])->update($data);
if($res!==false){
Db::commit();
return json(true);
}else{
Db::rollback();
return json(false);
}
}else{
return json(false);
}
}