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 簡単インストールチュートリアル

推薦する

Redhat 7.3 に MySQL 8.0.22 をインストールするための詳細なチュートリアル (バイナリ インストール)

目次1. MySQLインストールパッケージをダウンロードする2. MySQLのアンインストール手順3...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

Tomcat Nginx Redis セッション共有プロセス図

1. 準備ミドルウェア: Tomcat、Redis、Nginx Jar パッケージ: commons...

MySQLデータベースの基礎知識

目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...

RGBAアルファ透明度変換計算表

IEでのRGBAとフィルター値の変換RGBA 透明度値IE フィルター値0.1 19 0.2 33 ...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...

Mysql の一時テーブルとパーティションテーブルの違いの詳細な説明

一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...

JavaScriptはフォームデータの非同期取得を実装します

この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...

React双方向データバインディングの原理についての簡単な説明

目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...

クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...

HTML テーブルタグチュートリアル (26): セルタグ

<TD> タグの属性は、テーブル内のセルのプロパティを設定するために使用されます。表 &...

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...