微信小程序上传图片（PHP后台）9张，上传到指定文件夹

最新推荐文章于 2024-10-07 10:34:26 发布

原创最新推荐文章于 2024-10-07 10:34:26 发布 · 9.4k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#PHP存入文件 #微信小程序 #上传图片

本文介绍了一种在微信小程序中实现图片选择与上传的方法。通过使用wx.chooseImage选择图片，并利用wx.uploadFile进行图片上传，同时展示了如何在PHP后端接收和处理这些图片。文章还涉及了图片上传进度的实时显示。

wxml

<view class="picture_list">
  <view wx:for="{{upload_picture_list}}" class="picture_item" wx:key="{{index}}">
    <image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}" mode="aspectFill"></image>
    <image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}" mode="aspectFill"></image>
    <view class="upload_progress" wx:if="{{item.upload_percent < 100}}">{{item.upload_percent}}%</view>
  </view>
  <view class="picture_item">
    <image src="../../../image/officecollar.jpg" bindtap="uploadpic" mode="aspectFill"></image>
  </view>
</view>
<button bindtap='uploadimage'>确定上传</button>

JS：

 data: {
    upload_picture_list: []//装image的数组
  },
  //选择图片方法
  uploadpic: function (e) {
    var that = this//获取上下文
    var upload_picture_list = that.data.upload_picture_list
    //选择图片
    wx.chooseImage({
      count: 8, // 默认9，这里显示一次选择相册的图片数量 
      sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
        var tempFiles = res.tempFiles
        //把选择的图片 添加到集合里
        for (var i in tempFiles) {
          tempFiles[i]['upload_percent'] = 0
          tempFiles[i]['path_server'] = ''
          upload_picture_list.push(tempFiles[i])
        }
        //显示
        that.setData({
          upload_picture_list: upload_picture_list,
        })
      }
    })
  },

//点击上传事件
  uploadimage: function () {
    var page = this
    var upload_picture_list = page.data.upload_picture_list
    //循环把图片上传到服务器 并显示进度       
    for (var j in upload_picture_list) {
      if (upload_picture_list[j]['upload_percent'] == 0) {
        upload_file_server(page, upload_picture_list, j)
      }
    }
  },

//上传方法
function upload_file_server(that, upload_picture_list, j) {
  var time = new Date()
  var datetime = tt.formatTime(time)//获取时间 防止命名重复
  var date = datetime.substring(0, 8)//获取日期 分日期 文件夹存储
  console.log("开始上传" + j + "图片到服务器：")
  //上传返回值
  var upload_task = wx.uploadFile({
    url: 'http//Index/Imageadmin/imageupload',//需要用HTTPS，同时在微信公众平台后台添加服务器地址  
    filePath: upload_picture_list[j]['path'], //上传的文件本地地址    
    name: 'file',
    formData: {
      'num': j,
      'datetime': datetime,
      'date': date
    },
    //附近数据，这里为路径     
    success: function (res) {
      console.log(res.data)
      var data = JSON.parse(res.data)
      //字符串转化为JSON  
      if (data.Success == true) {
        console.log('OK')
        //var filename = "http://127.0.0.1:8095/" + data.file//存储地址 显示
        var filename = data.file//存储地址 显示
        upload_picture_list[j]['path_server'] = filename
      } else {
        var filename = "http://127.0.0.1:8095/xx.png"//错误图片 显示
        upload_picture_list[j]['path_server'] = filename
      }
      that.setData({
        upload_picture_list: upload_picture_list
      })
    }
  })
  //上传 进度方法
  upload_task.onProgressUpdate((res) => {
    upload_picture_list[j]['upload_percent'] = res.progress
    //console.log('第' + j + '个图片上传进度：' + upload_picture_list[j]['upload_percent'])
    //console.log(upload_picture_list)
    that.setData({ upload_picture_list: upload_picture_list })
  })
}

WXSS：

.picture_list {
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.picture_item {
  margin: 10px;
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.upload_progress {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #000;
  color: #fff;
  width: 160rpx;
  height: 160rpx;
  text-align: center;
  line-height: 160rpx;
  font-size: 12px;
}

.picture_item image {
  width: 160rpx;
  height: 160rpx;
}

php 后台：

class Imageadmin
{

    public function imageupload()
    {
        //名字获取
        $wxid=$_POST["num"];
        //时间获取
        $diaryTime=$_POST["datetime"];
        //获取日期
        $date = $_POST["date"];
        $a = substr($_FILES['file']['type'],6);//获取图片后缀
        //$a =  strstr( $_FILES['file']['type'], '/');
        $file_name=$date.'\\'.$diaryTime.'_'.$wxid.'.'.$a;//拼装存储地址path
        $file_name1=$date.'/'.$diaryTime.'_'.$wxid.'.'.$a;//拼装图片浏览path
        $path = "D:\wamp64\www\File\\".$file_name;//存储path
        $dir = iconv("UTF-8", "GBK","D:\wamp64\www\File\\".$date);//判断文件夹是否存在
        if (!file_exists($dir)){
            mkdir ($dir,0777,true);//不存在 创建新文件夹
            $panduan = move_uploaded_file($_FILES['file']['tmp_name'], $path);//存入图片
        } else {
            $panduan = move_uploaded_file($_FILES['file']['tmp_name'], $path);//存入已有文件夹内
        }
        //保存到指定路径  指定名字
        if ($panduan){//存储成功
            $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file_name1,'Success'=>true];
            return json($res);
        }else{//失败
            $res = ['errCode'=>0,'errMsg'=>'图片上传失败','file'=>'http://127.0.0.1:8095/xx.png','Success'=>!true];
            return json($res);
        }
    }
    public function upload()
    {
        //名字获取
        $wxid=$_POST["wxid"];
        //时间获取
        $diaryTime=$_POST["diaryTime"];
        //拼接存储名字
        $diaryTime=substr($diaryTime,0,10).substr($diaryTime,11,2).substr($diaryTime,14,2).substr($diaryTime,17);
        //得到存储名字
        $file_name=$wxid.'_'.$diaryTime.'.png';
        //存储路径
        $path='./picture/'.$file_name;
        //保存
        move_uploaded_file($_FILES['picture']['tmp_name'], $path);
    }


}