tp5實現檔案上傳圖片到資料庫，並顯示到頁面。

阿新 • • 發佈：2020-01-27

思路：
1、html中一個form表單，裡面編寫一個單個的name=file的input框，
2、編寫控制器上傳到資料庫的方法，要記著建立模型。
3、遍歷資料庫中的所有圖片。

html內容：提交圖片方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<h3>檔案上傳</h3>
<form action="{:url('home/home/upload')}" class="demo" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <br>
    <br>
    <br>
    <button type="button">上傳</button>
</form>
</body>
</html>
<script>
    // 檔案上傳js
    $("button").click(function(){
        // 判斷不允許為空
        if($("input[name=file]").val() == ""){
            alert("親，不允許為空哦！");
            return false;
        }
        $(".demo").submit();
    })
</script>

控制器方法：圖片上傳，和讀取圖片。

// 檔案上傳
    public function upload(Request $request){

        // 接受前端傳遞過來的變數
        $file = $request->file('file');

        // 判斷是否存在
        if($file){
            // 移動目錄,同時新增驗證
            $info = $file->validate(['ext'=>"jpg,jpeg,png,gif"])->move(ROOT_PATH . "public" . DS . "upload");
            // move返回的是一個布林型別
            if($info){
                // 拼接url 傳遞到資料庫
                $url = DS . "upload" . DS . $info->getSaveName();
                // 因為我的資料表名不是url所以轉換一下
                $data['upload'] = $url;
                // 存入到資料庫
                \app\home\model\Upload::create($data,true);
                // 上傳成功跳轉頁面
                $this->success("上傳成功","home/home/index");
            }else{
                $file->getError();
            }
        }
    }

    // 讀取檔案
    public function duqu(){

        $data = \app\home\model\Upload::select();

        return view("home/upload",['data'=>$data]);
    }

前臺讀取顯示頁面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width:200px;
            height: 200px;
            border:1px solid #ff0000;
            margin:10px;
        }
    </style>
</head>
<body>
{foreach $data as $v}
    <img src="{$v.upload}"  alt="">
{/foreach}
</body>
</html>

附上我的sql表
在這裡插入圖片描述
簡單的一個圖片上傳，如果想要多個檔案上傳，可以在頁面表單提交時加上一個file[]，然後在控制器方法中天一個foreach遍歷陣列，別的就可以不用修改，
框架中使用檔案上傳還是簡訊註冊相對來說容易的很多，但是我們也需要鍛鍊自己即使沒有框架也可以寫出檔案上傳，並且上傳到資料庫，而且還可以讀取的效果。