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

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

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

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

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

小程序前端代码：

小程序js代码:

data: {
  imglist:[]
 },

 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 ThinkUpload();// 实例化上传类
$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{// 上传成功 获取上传文件信息
//插入到数据库中
}
}
}

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