微信小程序-仿朋友圈发布动态（包括后端上传图片）

仿照微信朋友圈做了一个界面如下，先看效果：

1、点开界面

2、选择图片

3、点击上传

4、动态显示

第一个页面的wxml：

<view class='page'>
  <textarea class='text' bindinput="input" placeholder="分享动态" auto-height/>
  <view class="image_content">
    <view class='image' wx:for="{{img_url}}">
      <image class="moment_img" src="{{item}}"></image>
    </view>
    <view class='image' style='display:{{hideAdd?"none":"block"}}'>
      <image bindtap="chooseimage" class="moment_img" src='../../images/add.jpg'></image>
    </view>
  </view>
  <button bindtap="send" style='margin-right:5px;margin-left:5px'>发布</button>
</view>

第一个页面的wcss：

.page{
  padding: 20px
}

.text{
  width: 100%;
  margin-bottom: 40px;
  font-size: 20px;
  padding: 5px
}

.image{
  width:31%;
  height: 100px;
  padding: 2px
}

.moment_img{
  width: 98px;
  height: 98px;
}

.image_content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px
}

第一个页面的js：

Page({
  data: {
    img_url: [],
    content:''
  },
  onLoad: function (options) {
    
  },
  input:function(e){
    this.setData({
      content:e.detail.value
    })
  },
  chooseimage:function(){
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function (res) {
        
        if (res.tempFilePaths.length>0){

          //图如果满了9张，不显示加图
          if (res.tempFilePaths.length == 9){
            that.setData({
              hideAdd:1
            })
          }else{
            that.setData({
              hideAdd: 0
            })
          }

          //把每次选择的图push进数组
          let img_url = that.data.img_url;
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            img_url.push(res.tempFilePaths[i])
          }
          that.setData({
            img_url: img_url
          })
          
        }
        
      }
    })  
  },
  //发布按钮事件
  send:function(){
    var that = this;
    var user_id = wx.getStorageSync('userid')
    wx.showLoading({
      title: '上传中',
    })
    that.img_upload()
  },
  //图片上传
  img_upload: function () {
    let that = this;
    let img_url = that.data.img_url;
    let img_url_ok = [];
    //由于图片只能一张一张地上传，所以用循环
    for (let i = 0; i < img_url.length; i++) {
      wx.uploadFile({
        //路径填你上传图片方法的地址
        url: 'http://wechat.homedoctor.com/Moments/upload_do',
        filePath: img_url[i],
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: function (res) {
          console.log('上传成功');
          //把上传成功的图片的地址放入数组中
          img_url_ok.push(res.data)
          //如果全部传完，则可以将图片路径保存到数据库
          if (img_url_ok.length == img_url.length) {
            var userid = wx.getStorageSync('userid');
            var content = that.data.content;
            wx.request({
              url: 'http://wechat.homedoctor.com/Moments/adds',
              data: {
                user_id: userid,
                images: img_url_ok,
                content: content,
              },
              success: function (res) {
                if (res.data.status == 1) {
                  wx.hideLoading()
                  wx.showModal({
                    title: '提交成功',
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        wx.navigateTo({
                          url: '/pages/my_moments/my_moments',
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        },
        fail: function (res) {
          console.log('上传失败')
        }
      })
    }
  } 
})

我认为难点在于请求后台上传图片的方法，虽然我也没搞懂，不过直接使用，他会返回放在服务器的哪个位置，代码如下：

public function upload_do(){
        extract(generateRequestParamVars());

        /**
         * upload.php
         *
         * Copyright 2013, Moxiecode Systems AB
         * Released under GPL License.
         *
         * License: http://www.plupload.com/license
         * Contributing: http://www.plupload.com/contributing
         */

        #!! IMPORTANT:
        #!! this file is just an example, it doesn't incorporate any security checks and
        #!! is not recommended to be used in production environment as it is. Be sure to
        #!! revise it and customize to your needs.


        // Make sure file is not cached (as it happens for example on iOS devices)
        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
        header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
        header("Cache-Control: no-store, no-cache, must-revalidate");
        header("Cache-Control: post-check=0, pre-check=0", false);
        header("Pragma: no-cache");
        echo $fileName;

        // Support CORS
        // header("Access-Control-Allow-Origin: *");
        // other CORS headers if any...
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            exit; // finish preflight CORS requests here
        }


        if ( !empty($_REQUEST[ 'debug' ]) ) {
            $random = rand(0, intval($_REQUEST[ 'debug' ]) );
            if ( $random === 0 ) {
                header("HTTP/1.0 500 Internal Server Error");
                exit;
            }
        }

        // header("HTTP/1.0 500 Internal Server Error");
        // exit;


        // 5 minutes execution time
        @set_time_limit(5 * 60);

        // Uncomment this one to fake upload time
        usleep(5000);

        // Settings
        // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
        $targetDir = C('CACHE_DIR').DIRECTORY_SEPARATOR.'Uploads'.DIRECTORY_SEPARATOR.'Tmps';
        $uploadDir = C('CACHE_DIR').DIRECTORY_SEPARATOR.'Uploads'.DIRECTORY_SEPARATOR.'Tmps'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d');
        $uploadUrl = '/Uploads/Tmps/'.date('Y').'/'.date('m').'/'.date('d');

        //创建文件夹
        if(!is_dir($uploadDir)){
            @mkdir($uploadDir,0777,true);
        }

        $cleanupTargetDir = true; // Remove old files
        $maxFileAge = 5 * 3600; // Temp file age in seconds

        // Create target dir
        if (!file_exists($targetDir)) {
            @mkdir($targetDir);
        }

        // Create target dir
        if (!file_exists($uploadDir)) {
            @mkdir($uploadDir);
        }

        // Get a file name
        if (isset($_REQUEST["name"])) {
            $fileName = $_REQUEST["name"];
        } elseif (!empty($_FILES)) {
            $fileName = $_FILES["file"]["name"];
        } else {
            $fileName = uniqid();
        }

        //$fileName = uniqid("file_").'.'.pathinfo($fileName, PATHINFO_EXTENSION);
        $extension=pathinfo($fileName, PATHINFO_EXTENSION);
        if($extension){
            $fileName = uniqid().'.'.$extension;
        }else{
            $fileName = uniqid();
        }

        $md5File = @file('md5list.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        $md5File = $md5File ? $md5File : array();

        if (isset($_REQUEST["md5"]) && array_search($_REQUEST["md5"], $md5File ) !== FALSE ) {
            die('{"jsonrpc" : "2.0", "result" : null, "id" : "id", "exist": 1}');
        }

        $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
        $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;

        // Chunking might be enabled
        $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
        $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;
        // echo $_REQUEST["chunks"];
        // echo $_REQUEST["chunk"];

        // Remove old temp files
        if ($cleanupTargetDir) {
            if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
            }

            while (($file = readdir($dir)) !== false) {
                $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;

                // If temp file is current file proceed to the next
                if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
                    continue;
                }

                // Remove temp file if it is older than the max age and is not the current file
                if (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
                    @unlink($tmpfilePath);
                }
            }
            closedir($dir);
        }


        // Open temp file
        if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
        }

        if (!empty($_FILES)) {
            if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
            }

            // Read binary input stream and append it to temp file
            if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
            }
        } else {
            if (!$in = @fopen("php://input", "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
            }
        }

        while ($buff = fread($in, 4096)) {
            fwrite($out, $buff);
        }

        @fclose($out);
        @fclose($in);

        rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");

        $index = 0;
        $done = true;
        for( $index = 0; $index < $chunks; $index++ ) {
            if ( !file_exists("{$filePath}_{$index}.part") ) {
                $done = false;
                break;
            }
        }
        if ( $done ) {
            if (!$out = @fopen($uploadPath, "wb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
            }

            if ( flock($out, LOCK_EX) ) {
                for( $index = 0; $index < $chunks; $index++ ) {
                    if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
                        break;
                    }

                    while ($buff = fread($in, 4096)) {
                        fwrite($out, $buff);
                    }

                    @fclose($in);
                    @unlink("{$filePath}_{$index}.part");
                }

                flock($out, LOCK_UN);
            }
            @fclose($out);
        }

        // Return Success JSON-RPC response
        //die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');
        die($uploadUrl .'/'. $fileName);
    }

这个函数会将图片保存到项目文件的Cache目录的Upload/....什么什么的目录下。而且也返回了这个完整路径跟前端，前端拿着这个再去请求后台接口保存这个路径。保存图片的后台代码如下：

首先是控制层：

public function adds()
    {
        try{
            D(self::$MOMENTS_MODEL)->adds();
            $ajaxReturnData['status'] = 1;
            $ajaxReturnData['message'] = 'success';
        }catch (\Exception $e){
            $ajaxReturnData['status'] = 0;
            $ajaxReturnData['message'] = 'fail';
        }
        $this->ajaxReturn($ajaxReturnData);
    }

然后是模型层：（我之前犯傻的是，应该直接把数组，也就是$images直接保存进去就行了，不用json_encode()）

public function adds()
    {
        extract(generateRequestParamVars());
        $user = D(self::$WECHAT_USER)->find($user_id);
        $data = [];
        $data['user_id'] = $user_id;
        $data['user_name'] = $user['nickname'];
        $data['user_img'] = $user['imageurl'];
        $data['content'] = $content;
        $data['images'] = $images;
        $data['create_time'] = time();

        if ($this->add($data) === false) {
            throw new \Exception('OPERATION_FAILED');
        }
    }

保存好了之后，接下来如何在前端中显示图片呢？关键在于保存图片数组到数据库里，如何让它取出来的时候转为数组。代码如下：

控制层：

public function my_moments()
    {
        try{
            $data = D(self::$MOMENTS_MODEL)->my_moments();
            $ajaxReturnData['status'] = 1;
            $ajaxReturnData['message'] = 'success';
            $ajaxReturnData['data'] = $data;
        }catch (\Exception $e){
            $ajaxReturnData['status'] = 0;
            $ajaxReturnData['message'] = 'fail';
        }
        $this->ajaxReturn($ajaxReturnData);
    }

模型层：（这里使用了json_decode($array,true)方法，打印出来就是数组了）

public function my_moments()
    {
        extract(generateRequestParamVars());
        $user = D(self::$WECHAT_USER)->find($user_id);
        if($user['is_doctor'] == 1){
            $conditions = [];
            $conditions['user_id'] = $user_id;
            $doctor = D(self::$DOCTOR_MODEL)->where($conditions)->find();
            $identity = $doctor['hospital']. "" . $doctor['grade'];
        }else{
            $identity = '';
        }
        $conditions = [];
        $conditions['user_id'] = $user_id;
        $moments = $this->where($conditions)->order('create_time desc')->select();
        for($i = 0 ; $i < count($moments) ; $i ++){
            $moments[$i]['images'] = json_decode($moments[$i]['images'],true);
        }

        $data = [];
        $data[0] = $user;
        $data[1] = $moments;
        $data[2] = $identity;
        return $data;
    }

最后，动态页面如何显示图片呢？

主要我还在做九宫格图片的适配，就不贴代码了，主要是图片src需要加前缀，也就是你的域名。这样就能显示出来啦~

<image class="moment_img" src="http://wechat.homedoctor.com{{image}}"></image>

不相信你能看到最后，哈哈~我写的太多了