欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-05 13:33:11
微信小程序图片选择、上传到服务器、预览(php)实现实例 小程序实现选择图片、预览图片、上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的head...

微信小程序图片选择、上传到服务器、预览(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}}" style="width:75px;height:75px;" 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: '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;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{// 上传成功 获取上传文件信息
//插入到数据库中
}
}
}

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