tp5实现微信小程序多图片上传到服务器功能

第tp5实现微信小程序多图片上传到服务器功能最近在做一个教育类的小商城的微信小程序，用到了上传多个图片文件到服务器端，这里做一个讲解，希望对大家有所帮助。

1，小程序端：

在wxml文件中：

!--选择图片--

view

viewwx:for="{{imgs}}"wx:for-item="item"wx:key="*this"

imagesrc="{{item}}"data-index="{{index}}"mode="aspectFill"bindtap="previewImg"/image

viewdata-index="{{index}}"catchtap="deleteImg"删除/view

/view

viewbindtap="chooseImg"点击上传作业/view

/view

!--选择图片end--

在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){

varthat=this;

if(ame==''){

}else{

varimgs=this.data.imgs;

if(imgs.length=9){

this.setData({

lenMore:1

setTimeout(function(){

that.setData({

lenMore:0

},2500);

returnfalse;

wx.chooseImage({

//count:1,//默认9

sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有

sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有

success:function(res){

//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

vartempFilePaths=res.tempFilePaths;

varimgs=that.data.imgs;

//console.log(tempFilePaths+'');

for(vari=0;itempFilePaths.length;i++){

if(imgs.length=9){

that.setData({

imgs:imgs

returnfalse;

}else{

imgs.push(tempFilePaths[i]);

//console.log(imgs);

that.setData({

imgs:imgs,

//循环把图片上传到服务器

for(vari=0;iimgs.length;i++){

wx.uploadFile({

url:url+'Wx_SaveHomeWork',

filePath:imgs[i],

name:'files',

formData:{

cname:ame

success:function(res){

console.log(res)

//删除图片

deleteImg:function(e){

varimgs=this.data.imgs;

varindex=e.currentTarget.dataset.index;

imgs.splice(index,1);

this.setData({

imgs:imgs

//预览图片

previewImg:function(e){

//获取当前图片的下标

varindex=e.currentTarget.dataset.index;

//所有图片

varimgs=this.data.imgs;

wx.previewImage({

//当前显示图片

current:imgs[index],

//所有图片

urls:imgs

})

2，我们注意到我的wx.request请求中Wx_SaveHomeWork方法是后台服务器的接收图片方法，

后边我会把这个方法展示出来，

3.tp5后台controller中：

//存取学生作业信息

publicfunctionWx_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($filesas$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.讲解的不够清楚，因为是自己写的