微信小程序图片选择、上传到服务器、预览(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{// 上传成功 获取上传文件信息

//插入到数据库中

}

}

}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！