仿照微信朋友圈做了一个界面如下，先看效果：
1、点开界面
2、选择图片
3、点击上传
4、动态显示
第一个页面的wxml：
<view> <textarea bindinput="input" placeholder="分享动态" auto-height/> <view> <view wx:for="{{img_url}}"> <image src="https://www.jb51.net/{{item}}"></image> </view> <view> <image bindtap="chooseimage" src=''></image> </view> </view> <button bindtap="send">发布</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: * 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').'https://www.jb51.net/'.date('m').'https://www.jb51.net/'.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 .'https://www.jb51.net/'. $fileName); }