多图片上传服务器,使用tp5怎么实现微信小程序多图片上传到服务器功能..."/>
小程序多图片上传服务器,使用tp5怎么实现微信小程序多图片上传到服务器功能...
使用tp5怎么实现微信小程序多图片上传到服务器功能
发布时间：2021-05-22 16:32:55
来源：亿速云
阅读：70
作者：Leah
今天就跟大家聊聊有关使用tp5怎么实现微信小程序多图片上传到服务器功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
1，小程序端：
在wxml文件中：
删除
点击上传作业
在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.dataame==''){
}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
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
wx.uploadFile({
url: url + 'Wx_SaveHomeWork',
filePath: imgs[i],
name: 'files',
formData: {
cname: that.dataame
},
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);
}
看完上述内容，你们对使用tp5怎么实现微信小程序多图片上传到服务器功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
更多推荐
小程序多图片上传服务器,使用tp5怎么实现微信小程序多图片上传到服务器功能...
发布评论