微信小程序之圖片的上傳與下載

大家都知道,小程序有着大量的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;
		}

只有完整的路徑才能訪問到圖片.如果有某些地方存在問題,希望各位大牛指點…