微信小程式之圖片的上傳與下載
阿新 • • 發佈:2018-12-13
大家都知道,小程式有著大量的api,檔案(圖片)的上傳也是其中之一. 給大家分享一下個人的用法.我所做的是一個類似空間日誌的圖文釋出以及混排.
首先是圖片的選擇,使用wx.chooseImage,將選中的圖片存放在一個數組裡面,便於上傳.
chooseImage: function () { var that = this; wx.chooseImage({ success: function (res) { console.log(res); for (var i = 0; i < res.tempFilePaths.length; i++){ var newList = that.data.imagesList.concat(res.tempFilePaths[i]); } that.setData({ imagesList: newList, }) }, }) },
然後就是上傳圖片了,使用的是wx.uploadFile 將圖片數組裡面的圖片取出以此上傳,
//上傳圖片 up_img: function (img,date,index) { var _this = this; wx.uploadFile({ url: 'https://這裡是伺服器域名/diary/setImage.php', //介面 filePath: img,//圖片路徑 name: 'file', formData: {//存放圖片的相關資訊 blog_id: date, img_index: index, }, success: function (res) { if (res.data == '200') { wx.showToast({ title: '上傳成功', }) } else if (res.data == '404') { wx.showToast({ title: '上傳失敗', }) } }, fail: function (error) { console.log(error); } })
在後端再進行接收與儲存.
require 'connect.php'; date_default_timezone_set("Asia/Shanghai"); //設定時區 $code = $_FILES['file'];//獲取小程式傳來的圖片 if(is_uploaded_file($_FILES['file']['tmp_name'])) { //把檔案轉存到你希望的目錄 $uploaded_file=$_FILES['file']['tmp_name']; $username = "image"; //動態的建立一個資料夾 $user_path=$_SERVER['DOCUMENT_ROOT']."/diary/".$username; //判斷是否已經有這個資料夾 if(!file_exists($user_path)) { mkdir($user_path); } $file_true_name=$_FILES['file']['name'];//得到圖片的檔名 $name = time().rand(1,1000)."-".date("Y-m-d");//取當前時間戳+一個4位隨機數然後再加上當前日期作為圖片的新的檔名 $type = substr($file_true_name,strrpos($file_true_name,"."));//擷取圖片的型別字尾(.jpg,.png等等) //strrops($file_true,".")查詢“.”在字串中最後一次出現的位置 $image = $name.$type;//組成新名稱 $move_to_file=$user_path."/".$name.$type;// if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file))) { //圖片儲存成功的同時,將改名之後的圖片名稱存放至資料庫,方便前端下載 $sql="insert into image values('".$_POST['blog_id']."','".$image."','".$_POST['img_index']."')"; $result=$mysqli->query($sql); if($result) { echo '200'; }else{ //不存在資訊就返回false echo '404'; } echo $_FILES['file']['name']."--上傳成功".date("Y-m-d H:i:sa"); } else { echo "上傳失敗".date("Y-m-d H:i:sa"); } } else { echo "上傳失敗".date("Y-m-d H:i:sa"); }
在後端儲存完之後,前端使用wx.request進行不同請求訪問即可獲取圖片資訊.
這是資料庫裡面存的資訊.
這是資料夾裡面存的資訊
返回路徑的時候記得做以下這個操作
$path = 'https://這裡是伺服器域名/diary/image/';
while ($row = $result->fetch_assoc()){
$row['img_url'] = $path.$row['img_url'];
$results[]=$row;
}
只有完整的路徑才能訪問到圖片.如果有某些地方存在問題,希望各位大牛指點…