Vue+thinkphp5.1+axiosでファイルアップロードを実現

この記事では、thinkphp5.1 + Vue+axiosを使用してファイルをアップロードする方法を参考までに紹介します。具体的な内容は次のとおりです。

序文

thinkphp5.1 + Vue+axios+を使用してファイルをアップロードする

1. ページコード

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>デモをアップロード</title>
    <スタイル>
        .fileBtn{
            幅: 180ピクセル;
            高さ: 36px;
            行の高さ: 36px;
            背景: スカイブルー;
            境界線の半径: 5px;
            表示: ブロック;
            テキスト配置: 中央;
            色: 白;
        }
        [v-マント] {
            表示: なし;
        }
    </スタイル>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<本文>
<div id="アプリ">
    <h1 v-cloak>{{メッセージ}}</h1>
    <フォーム>
        <input type="file" name="file" ref="file" id="file" v-on:change="upload" style="visibility: hidden;" />
        <label for="file" class="fileBtn">アップロード</label>
    </フォーム>
</div>

</本文>
</html>

<スクリプト>
    var vue = 新しい Vue({
        el:'#app',
        データ：{
            メッセージ: 'ファイルのアップロード',
        },
        方法:{
            アップロード:関数(ファイル) {
                コンソールにログ出力します。
                var フォーム = 新しい FormData()
                var configs = {
                    ヘッダー:{'Content-Type':'multipart/form-data; charse=UTF-8'}
                };
                フォームに追加します('ファイル'、ファイル.ターゲット.ファイル[0]);
                axios.post('http://127.0.0.1/index/index/upload', フォーム、設定)
                    .then(関数 (応答) {
                        応答データコード == 0 の場合
                            alert('ファイルが正常にアップロードされました');
                        } それ以外 {
                            alert('ファイルのアップロードに失敗しました');
                        }
                        file.target.value = '';

                    })
                    .catch(関数 (エラー) {
                        コンソール.log(エラー);
                    });
            }
        }
    });

</スクリプト>

2. クロスドメインインターフェースの問題を解決する

ここでは Apache 2.4.8 が使用されています。httpd.conf を見つけて、次の設定行を追加します。

ヘッダーセット Access-Control-Allow-Origin *

3. バックエンド処理アップロード部分

/**
     * ファイルアップロード方法の検証 */
    パブリック関数アップロード()
    {
        試す{
            $file = リクエスト()->file('file');

            空の場合($file) {
                echo json_encode(['code' => 1,"msg" => 'アップロードファイルを選択してください'],JSON_UNESCAPED_UNICODE);exit;
            }
            // フレームワークアプリケーションのルートディレクトリ /uploads/ ディレクトリに移動します $info = $file->move( '../uploads');
            $infoの場合{
                // アップロード成功後にアップロード情報を取得する // jpg を出力する
                echo json_encode(['code' => 0,"msg" => 'success'],JSON_UNESCAPED_UNICODE);exit;
            }それ以外{
                // アップロードに失敗しました。エラー情報を取得できませんでした。 echo json_encode(['code' => 1,"msg" => 'error'],JSON_UNESCAPED_UNICODE);exit;
            }
        } キャッチ (例外 $e) {
            echo json_encode(['code' => 1,"msg" => 'error'],JSON_UNESCAPED_UNICODE);終了;
        }
}

4. 実際の効果