微信小程序图片选择、上传到服务器、预览(php)实现实例
小程序实现选择图片、预览图片、上传到开发者服务器上
后台使用的tp3.2 图片上传
请求时候的header参考时可以去掉(个人后台验证权限使用)
小程序前端代码：
选择提问图片: 点击选择图片
提交
小程序js代码:
data: {
imglist:[]
},
/**
* form提交事件
*/
bindformsubmit:function(e){
self=this
//图片
var imglist = self.data.imglist
//提问内容
var content=e.detail.value.content;
if(content==''){
wx.showtoast({
title: '内容不能为空',
icon: 'loading',
duration: 1000,
mask:true
})
}
wx.showloading({
title: '正在提交...',
mask:true
})
//添加问题
wx.request({
url: 'https://xxxxxxxxxx/index.php?g=user&m=center&a=createwt',
data: {
content:content
},
method: 'get', // options, get, head, post, put, delete, trace, connect
header: app.globaldata.header, // 设置请求的 header
success: function (res) {
// success
if(typeof(res.data)=='number'){
if (imglist != '') {
//开始插入图片
for(var i=0;i
//上传至服务器
wx.uploadfile({
url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //仅为示例，非真实的接口地址
filepath: imglist[0],
name: 'files',
formdata: {
'wtid': res.data
},
header: app.globaldata.header,
success: function (res) {
if(i>=imglist.length){
self.setdata({
imglist:[]
})
wx.hideloading();
wx.showtoast({
title: '提问成功',
icon: 'success',
duration: 2000,
mask: true
})
wx.navigateback({
delta: 1
})
}
}
})
}
console.log(imglist);
}else{
wx.hideloading();
wx.showtoast({
title: '提问成功',
icon: 'success',
duration: 2000,
mask: true
})
wx.navigateback({
delta: 1
})
}
}else{
wx.hideloading();
wx.showtoast({
title: res.data,
icon: 'loading',
duration: 1000,
mask: true
})
}
},
fail: function (res) {
self.onload();
}
})
},
//点击选择图片
checkimg:function(){
console.log('点击选择图片');
self=this
wx.chooseimage({
count: 9, // 默认9
sizetype: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourcetype: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempfilepath可以作为img标签的src属性显示图片
var tempfilepaths = res.tempfilepaths
self.setdata({
imglist:tempfilepaths
})
}
})
},
//点击预览图片
ylimg:function(e){
wx.previewimage({
current: e.target.dataset.src,
urls: this.data.imglist // 需要预览的图片http链接列表
})
}
php后台代码
//图片上传
public function upload(){
if(is_post){
$upload = new \think\upload();// 实例化上传类
$upload->maxsize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootpath = './uploads/'; // 设置附件上传根目录
$upload->savepath = ''; // 设置附件上传(子)目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->geterror());
}else{// 上传成功 获取上传文件信息
//插入到数据库中
}
}
}
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
