这篇文章主要介绍了微信小程序中如何实现图片选择、上传到服务器、预览功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联从2013年成立，是专业互联网技术服务公司，拥有项目网站设计、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元伊通做网站,已为上家服务,为伊通各地企业和个人服务,联系电话:18982081108
小程序实现选择图片、预览图片、上传到开发者服务器上
后台使用的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=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{// 上传成功 获取上传文件信息
//插入到数据库中
}
}
}感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序中如何实现图片选择、上传到服务器、预览功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网页标题：微信小程序中如何实现图片选择、上传到服务器、预览功能
文章源于：
http://bzwzjz.com/article/goghdj.html
