QQ小程序6大功用_微信小程序图片选择、上传到效

微信小程序图片选择、上传到服务器、预览(PHP)实现实例     -J-Le   这篇文章主要介绍了微信小程序图片选择、上传到服务器、预览(PHP)实现实例的相关资料,需要的朋友可以参考下

微信小程序图片选择、上传到服务器、预览(PHP)实现实例

小程序实现选择图片、预览图片、上传到开发者服务器上

后台使用的tp3.2 图片上传

请求时候的header参考时可以去掉(个人后台验证权限使用)

小程序前端代码:

 view 
 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.detail.value.content;
 if(content==''){
 wx.showToast({
 title: '内容不能为空',
 icon: 'loading',
 duration: 1000,
 mask:true
 wx.showLoading({
 title: '正在提交...',
 mask:true
 //添加问题
 wx.request({
 url: '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: '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{// 上传成功 获取上传文件信息
//插入到数据库中

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