この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu環境でPHPとNginxをコンパイルしてインストールする方法
>>: MySQL 8.0.12 簡単インストールチュートリアル
ここでは、PHP、JSP、または .NET 環境については説明しません。アーキテクチャの観点から問題...
Dockerfile でのボリュームのマウントと docker -v コマンドによるマウントには明ら...
1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...
Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...
設定例 アップストリームバックエンド{ サーバー backend1.example.com 重み=5...
目次出力出力パス出力.publicPath webpack-dev-server の publicP...
Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....
まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...
原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...
目次変数意味があり発音しやすい変数名を使用する同じ型の変数には同じ語彙を使用する検索可能な名前を使用...
この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...
#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...
チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...
目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....