PHP/mysql に保存した画像データ　が表示されない

前提・実現したいこと

PHP／Mysql を使って画像を表示させたい

発生している問題・エラーメッセージ

PHPでアップロードフォームに　①画像②captionを登録すると
アップロードフォームに画像が表示されるページを作成中です。

②キャプションは表示されるのですが、①画像表示ができません。
検証⇨エラー表示すると　「４０４　not found」との表示

該当のソースコード

php
1<?php
2require_once "./dbc.php";
3$files = getAllFile();
4
5?>
6<!-- ①フォームの説明 -->
7<!-- ②$_FILEの確認 -->
8<!-- ③バリデーション -->
9<!DOCTYPE html>
10<html lang="ja">
11  <head>
12    <meta charset="UTF-8" />
13    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14    <title>アップロードフォーム</title>
15  </head>
16  <style>
17  body {
18  padding: 30px;
19  margin: 0 auto;
20  width: 50%;
21}
22textarea {
23  width: 98%;
24  height: 60px;
25}
26.file-up {
27  margin-bottom: 10px;
28}
29.submit {
30  text-align: right;
31}
32.btn {
33  display: inline-block;
34  border-radius: 3px;
35  font-size: 18px;
36  background: #67c5ff;
37  border: 2px solid #67c5ff;
38  padding: 5px 10px;
39  color: #fff;
40  cursor: pointer;
41}
42</style>
43
44  
45  <body>
46    <form enctype="multipart/form-data" action="./file_upload.php" method="POST">
47      <div class="file-up">
48        <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
49        <input name="img" type="file" accept="image/*" />
50      </div>
51      <div>
52        <textarea
53          name="caption"
54          placeholder="キャプション（140文字以下）"
55          id="caption"
56        ></textarea>
57      </div>
58      <div class="submit">
59        <input type="submit" value="送信" class="btn" />
60      </div>
61    </form>
62    <div>
63    <?php foreach($files as $file): ?>
64    <img src = "<?php echo "{$file['file_path']}" ?>"  alt = "">
65    <p><?php echo "{$file['description']}" ?></p>
66    <?php endforeach; ?>
67    </div>
68  </body>
69</html>
70

php
1<?php
2// ①ファイルの保存
3// ②DB接続
4// ③DBへの保存
5require_once "./dbc.php";
6
7// ファイル関連の取得
8$file = $_FILES['img'];
9$filename = basename($file['name']);
10$tmp_path = $file['tmp_name'];
11$file_err = $file['error'];
12$filesize = $file['size'];
13$upload_dir = 'Applications/MAMP/htdocs/final_kadai/images/';
14$save_filename = date('YmdHis'). $filename;
15$err_msgs = array();
16$save_path = $upload_dir . $save_filename;
17
18// 取得情報の確認
19// var_dump($file);
20
21// キャプションを取得
22$caption = filter_input(INPUT_POST,'caption',
23FILTER_SANITIZE_SPECIAL_CHARS);
24
25// キャプションのバリデーション
26// 未入力
27if(empty($caption)){
28    echo  'キャプションを入力してください';
29    echo '<br>';
30
31}
32
33// 文字数
34if(strlen($caption) > 140){
35    array_push($err_msgs,'キャプションは140字以内で入力してください');
36}
37
38// ファイルのバリデーション
39// ファイルサイズが　１MB未満か
40if($filesize > 1048576 || $file_err == 2){
41    array_push($err_msgs,'ファイルサイズは1MB未満にしてください');
42}
43
44// 拡張子は画像形式か
45$allow_ext = array('jpg','jpeg','png');
46$file_ext = pathinfo($filename,PATHINFO_EXTENSION);
47
48if(!in_array(strtolower($file_ext),$allow_ext)){
49    array_push($err_msgs,'画像ファイルを添付してください');
50    
51}
52if(count($err_msgs) === 0){
53
54
55// ファイルはあるか
56if(is_uploaded_file($tmp_path)){
57    if(move_uploaded_file($tmp_path,$upload_dir.
58    $save_filename)){
59        echo $filename . 'を'. $upload_dir.'へアップしました
60    ';
61    // DBに保存（ファイル名、ファイルパス、キャプション)
62    $result = fileSave($filename,$save_path,
63    $caption);
64    if($result){
65        echo "データベースに保存しました!";
66    }else{
67        echo "データベースへの保存が失敗しました";    
68    }
69    }else{
70    echo 'ファイルが保存できませんでした';
71    }
72}else{ 
73    echo 'ファイルが選択されていません';
74    echo '<br>';
75}
76}else{
77  foreach ($$err_msgs as $msg){
78      echo $msg;
79      echo '<br>';
80  }     
81  }
82
83?>
84<a href = "./upload_form.php">戻る</a>
85
86

php
1<?php
2function dbc()
3{
4    $host ="localhost";
5    $dbname = "f_db";
6    $user = "root";
7    $pass ="root";
8    $dns = "mysql:host=$host;
9    dbname=$dbname;charset = utf8";
10    $dbh = new PDO($dns, $user, $pass);
11    var_dump($dbh);
12    try{
13        $pdo = new PDO($dns, $user, $pass,
14        [
15            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
16            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
17        ]
18    );
19            // echo "成功";
20            return $pdo;
21    }catch(PDOException $e){
22        exit('DbConnectError:'.$e->getMessage());
23    }
24}
25// ファイルデータを保存
26// @parem string $filename ファイル名
27// @parem string $save_path 保存先のパス
28// @parem string $caption 投稿の説明
29// @return bool  $result
30// データ登録sql作成
31function fileSave($filename,$save_path,$caption)
32{
33    $result = False;
34    $sql = "INSERT INTO file_table (file_name, file_path,
35    description ) VALUE (?,?,?)";
36    try{
37    $stmt = dbc()->prepare($sql);
38    $stmt->bindValue(1,$filename);
39    $stmt->bindValue(2,$save_path);
40    $stmt->bindValue(3,$caption);
41    $result = $stmt->execute();
42    return $result;
43    } catch(\Exception $e) {
44        echo $e->getMessage();
45    }
46}
47
48// ファイルデータを取得
49// 　return array　// $fileData
50// データ登録sql作成
51function getAllFile()
52{
53    $sql = "SELECT * FROM file_table";
54
55    $fileData  = dbc()->query($sql);
56
57    return $fileData;
58}
59
60getAllFile();
61

試したこと

当初、uploadform.phpの最後、php<>内
画像表示用のコードに問題があると思い、
コードを見返したのですが、解決しませんでした。

その後、冒頭に書いた404not foundを確認したので、
file_upload.phpの　13行目 upload_dir　以下格納場所を変更すると
今度はファイルのアップロード（phpMyadminへの保存すらできなくなってしまいました）

youtubeのPHP/Mysqlの画像アップロード動画等を見ても分からず、
しまいにはできていたことを出来なくしてしまい
３〜４時間位詰まってしまいました

お分かりのかたご教示頂けますとありがたいです。
よろしくお願いします

補足情報（FW/ツールのバージョンなど）

エディタ：vscode
SQL:phpMyAdmin

ここにより詳細な情報を記載してください。

m.ts10806

2021/03/30 21:25

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、御覧の通り、マークダウンのcode機能の中では他のマークダウンの機能は無効化されますので、外に出して、可能なら投稿前にプレビューでチェックしてください。

FKM

2021/03/31 00:47

vs-codeはあまり自分は信用してませんね。なぜなら、キャッシュエラーが起きやすいからです。実際Chromeでプレビューテストして直接パスを確認した方がいいですよ。

行動規範の内容に同意します

回答1件

ベストアンサー

接続時にエラーは出てませんか？
スペースや改行はないほうがいいです。
DSNの駄目なスペースはどれか
ひとまず上記は対応しつつ、「正しくファイルが保存された先をリンクできているか」を確認してください。

file_pathフィールドに保存されているのは「サーバー内の絶対パス」に見えます。
ブラウザからアクセスできるのは「DocumentRootからのパス」です。
「サーバー内の絶対パス」を利用するのであれば、そのままechoするのではなく、ファイルの実態をバイナリとして取得して出力する等（base64とか）工夫が必要です。

「保存している場所が決まっている」のでしたら、ファイル名だけ保存しておいて「DocumentRootから置き場所へのパス」は固定で、ファイル名だけ可変にすれば良いと思います。

割とこの手の質問は多いです。
[画像保存 tag:PHP] の検索結果： 729件

投稿2021/03/30 22:29

編集2021/03/30 22:30

m.ts10806

総合スコア80875

mmen7

2021/03/30 22:45

迅速なご回答ありがとうございます。とても助かります。接続時のエラーは出ないのですが、 vscodeにphpの拡張機能を入れてみます。出先でpcを触れる環境にないので、ご回答や類似質問をよくよみつつ後ほど修正してみます。解決しましたら、またこちらからご連絡させて頂きます！

m.ts10806

2021/03/30 22:59

＞vscodeにphpの拡張機能を入れてみます。 DSNの解析は実行時に行われるので拡張機能ではとれません。 try-catchのcatchのほうにいってないか（異常捕捉）を確認してもらいたかったのです。まぁDSN文字列はスペースも改行も入れないのが確実です。

mmen7

2021/03/30 23:08

貼付け頂いた、 "DSNの駄目なスペースはどれか" をよくよく読むと理解できました。ご指摘どおり無駄なスペースや改行がついている気がするので、そこをまずは直します。また、パスについては「保存している場所が決まっている」のでご回答にある "ファイル名だけ保存しておいて「DocumentRootから置き場所へのパス」は固定で、ファイル名だけ可変にすれば良いと思います。"が選択肢になってくるのですが、ファイル名を可変にする　とはどのような処理になりますでしょうか。重ねての質問ですみません。

m.ts10806

2021/03/30 23:11

>ファイル名を可変にする　「DBから取得してきた値」＝「可変」「動的」です。 img src=/images/${image_name}

mmen7

2021/03/31 02:01

かしこまりました。確認してみます。ありがとうございます

行動規範の内容に同意します