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

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. 実際の効果

テスト成功!

vue.js の学習チュートリアルについては、特別トピックの vue.js コンポーネント学習チュートリアルと Vue.js フロントエンド コンポーネント学習チュートリアルをクリックして学習してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ファイルアップロードの脆弱性とバイパス技術を使用したPHPセキュリティ攻撃と防御の詳細
  • php.ini ファイルのアップロード サイズ構成を変更する PHP ケース スタディ
  • PHP ファイルを OSS にアップロードし、リモート Alibaba Cloud OSS ファイルを削除する
  • phpcmsv9.0 の任意ファイルアップロード脆弱性の分析
  • PHP で base64 エンコードされたファイルをアップロードする際の問題の詳細な説明
  • PHPはファイルのアップロードとダウンロードを実装します
  • ファイルがアップロードされない場合の PHP ケース分析と解決策

<<:  Ubuntu環境でPHPとNginxをコンパイルしてインストールする方法

>>:  MySQL 8.0.12 簡単インストールチュートリアル

推薦する

大規模なウェブサイトアーキテクチャを設計・構築する際に考慮すべき10の課題

ここでは、PHP、JSP、または .NET 環境については説明しません。アーキテクチャの観点から問題...

Dockerfile における VOLUME と docker -v の違い

Dockerfile でのボリュームのマウントと docker -v コマンドによるマウントには明ら...

MySQL にテーブルデータを挿入するときに中国語の文字化けが発生する問題を解決する方法

1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

nginxのアップストリーム設定と機能の詳細な説明

設定例 アップストリームバックエンド{ サーバー backend1.example.com 重み=5...

Webpack での publicPath の使用法の詳細な説明

目次出力出力パス出力.publicPath webpack-dev-server の publicP...

docker run後にコンテナがExited (0)と表示される問題を解決する

Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...

Vueのref属性の詳細な説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

Centos7 への mysql8.0rpm のインストール チュートリアル

まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

エレガントなJSコードの書き方

目次変数意味があり発音しやすい変数名を使用する同じ型の変数には同じ語彙を使用する検索可能な名前を使用...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

MySQL 文字列連結と null 値の設定のためのインスタンス メソッド

#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....