この記事では、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 簡単インストールチュートリアル
目次1. MySQLインストールパッケージをダウンロードする2. MySQLのアンインストール手順3...
テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...
1. 準備ミドルウェア: Tomcat、Redis、Nginx Jar パッケージ: commons...
目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...
IEでのRGBAとフィルター値の変換RGBA 透明度値IE フィルター値0.1 19 0.2 33 ...
1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...
一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...
この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...
webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...
WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...
<TD> タグの属性は、テーブル内のセルのプロパティを設定するために使用されます。表 &...
この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...