⼩程序图⽚选择、上传到服务器、预览（PHP）实现
实例
⼩程序图⽚选择、上传到服务器、预览（PHP）实现实例
⼩程序实现选择图⽚、预览图⽚、上传到开发者服务器上
后台使⽤的tp3.2 图⽚上传
请求时候的header参考时可以去掉(个⼈后台验证权限使⽤)
⼩程序前端代码：
<view class="section">
<form bindsubmit="bindFormSubmit">
<textarea placeholder="请输⼊问题内容" name="content"/>
<view class="">
选择提问图⽚:  <label bindtap="checkimg">点击选择图⽚</label>
</view>
<view class="">
<image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" data-src="{{item}}" src="{{item}}"></image>
</view>
<button form-type="submit"> 提交 </button>
</form>
</view>
⼩程序js代码:
data: {
imglist:[]
},
/**
* form提交事件
*/
bindFormSubmit:function(e){
self=this
//图⽚
var imglist = self.data.imglist
//提问内容
var content=e.t;
if(content==''){
wx.showToast({
title: '内容不能为空',
icon: 'loading',
duration: 1000,
app开发实例
mask:true
})
}
wx.showLoading({
title: '正在提交...',
mask:true
})
/
/添加问题
url: '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;i++){
//上传⾄服务器
wx.uploadFile({
url: '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) {
}
})
},
//点击选择图⽚
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 = pFilePaths
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{// 上传成功获取上传⽂件信息
//插⼊到数据库中
}
}
}
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。