tp5实现微信小程序多图片上传到服务器
最近在做一个教育类的小商城的微信小程序，用到了上传多个图片作业文件到服务器端，
这里做一个讲解，希望对大家有所帮助。
1，小程序端：
在wxml文件中：
<
view
class
=
"picture">
<
view
class
=
"img"
wx:for
=
"{{imgs}}"
wx:for-item
=
"item"
wx:key
=
"*this">
<
image
class
=
'imgSelected'
src
=
"{{item}}"
data-index
=
"{{index}}"
mode
=
"aspectFill"
bindtap
=
"previewImg">
image
>
<
view
class
=
"delete-btn"
data-index
=
"{{index}}"
catchtap
=
"deleteImg">
删除
view
>
view
>
<
view
class
=
"clickImg"
bindtap
=
"chooseImg">
点击上传作业
view
>
view
>
在js文件中：
Page({
/**
* 页面的初始数据
*/
data: {
index:
0
,
multiIndex: [
0
,
0
],
//传到后台的课程分类
cname:
''
,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:
function
(options) {
},
/**
*
* 生命周期函数--监听页面初次渲染完成
*/
onReady:
function
() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow:
function
() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:
function
() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:
function
() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:
function
() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom:
function
() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage:
function
() {
},
// 上传图片操作
// 上传图片
chooseImg:
function
(e) {
var
that =
this
;
if
(that.data.cname==
''
){
}
else
{
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,
});
//循环把图片上传到服务器
for
(
var
i =
0
; i < imgs.length; i++) {
wx.uploadFile({
url: url +
'Wx_SaveHomeWork'
,
filePath: imgs[i],
name:
'files'
,
formData: {
cname: that.data.cname
},
success:
function
(res) {
console.log(res)
}
})
}
}
});
}
},
// 删除图片
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
})
},
})
2，我们注意到我的wx.request请求中Wx_SaveHomeWork方法是后台服务器的接收图片方法，
后边我会把这个方法展示出来，
3.tp5后台controller中：
//存取学生作业信息 public function Wx_SaveHomeWork(){ $files=\request()->file('files'); $cname=\request()->param('cname'); $cid=Db::name('course')->where('cname',$cname)->value('id'); $max_id=Db::name('homework')->max('id'); foreach($files as $item){ // 移动到框架应用根目录/public/uploads/ 目录下 $info = $files->rule('date')->move(ROOT_PATH . 'public' . DS . 'uploads'); if($info){ $saveName=str_replace("\\","/",$info->getSaveName()); $img='/uploads/'.$saveName; $homework[]=['id'=>$max_id+1,'img'=>$img,'cid'=>$cid]; } } //把数据插入到作业表中 \db('homework')->insertAll($homework); }
这里说一下，max_id的作用，因为接受的是多张图片，相当于一次性要存储多条数据，所以用max_id对id进行自增，存储到数据库表，cid是我自己数据库逻辑需要用到的变量，可以不用考虑，
4.讲解的不够清楚，因为是自己写的，感受不到难点在哪里，我自己的难点是在小程序端的图片上传，用了for循环，循环上传的方法，其他的相对来说，逻辑比较简单。