1. はじめに効果は以下のとおりです 2. アイデアファイルをアップロードする2つの方法1. フォームから <フォーム メソッド="投稿" enctype="multipart/from-data" アクション="api/アップロード" > <input type="ファイル名="ファイル"> <button type="submit">送信</button> </フォーム> フォームの method 属性は、HTML フォームを通じてサーバーにデータを送信し、サーバーの変更された結果を返す「post」リクエストを指定します。この場合、Content-Type は、<form> 要素に適切な enctype 属性を設定することによって設定されます。 フォームの enctype 属性は、フォーム データをサーバーに送信する前にどのようにエンコードするかを指定します。
2. JavaScript非同期リクエストフォーム FormData インターフェイスは、フォーム データを表すキーと値のペアを作成する方法を提供し、XMLHttpRequest.send() メソッドを通じてデータを簡単に送信できることがわかっています。このインターフェイスとこのメソッドは非常にシンプルで直接的です。送信エンコーディングが「multipart/form-data」に設定されている場合、フォームと同じ形式が使用されます。 var formdata = new FormData(); // FormData オブジェクトを作成します formdata.append("name","laotie"); // append() メソッドを使用して新しい属性値を追加します... // その他の方法については、以下のリンクをクリックしてください FormData インターフェース 3. ライフサイクルアップロードコンポーネントにもライフサイクルがある beforeUpload --> アップロード中 --> fileUploaded または uploadedError 4. コードドラフトこの例では、アップロードコンポーネントはjs非同期リクエストを使用して開発されています。 <input type="file" name="file" @change.prevent="handleFileChange"> // ファイルのアップロードをトリガーするファイルタイプの入力を作成します。後で入力を非表示にしてスタイルをカスタマイズできます。// スタイルをカスタマイズするときに、スロットを使用して、さまざまなアップロード状態 (読み込み中、成功、デフォルト) のスタイルを区別できます。 const handleFileChange = (e:Event)=>{ const target = e.target を HTMLInputElement として const files = Array.from(target.files)// ここで取得されるのはクラス配列であることに注意してください if(files){ // ファイルを取得する const uploadedFile = files[0] if(!validateFormat) 戻り値 // ...これは単なる考え方であり、具体的な検証についてはここでは説明しません // ファイルをアップロードする前に、ファイル形式、サイズなどの検証を行ってください。 // 要件を満たさない場合、それ以上のリクエストは送信されません const formData = new FormData() formData.append(アップロードされたファイル名、アップロードされたファイル) axios.post('/upload',formData,{ ヘッダー:{ // エンコード タイプ 'Content-Type': 'multipart/form-data' を設定することに注意してください } }).then(res=>{ console.log('アップロード成功') }).catch(エラー =>{ // ファイルのアップロードに失敗しました}).finally(()=>{ // ファイルのアップロードが完了しました。成功か失敗かは関係ありません // ここで input.value をクリアできます }) } } 5. 具体的な実施// アップロード.vue <テンプレート> <div class="アップロードコンテナ"> <div class="upload-box" @click.prevent="triggerUpload" v-bind="$attrs"> <スロット名="読み込み中" v-if="fileStatus==='読み込み中'"> <button class="btn btn-primary">アップロード中</button> </スロット> <スロット名="アップロード済み" v-else-if="fileStatus==='成功'" :uploadedData="ファイルデータ"> <button class="btn btn-primary">アップロードに成功しました</button> </スロット> <スロット v-else name="default"> <button class="btn btn-primary">クリックしてアップロード</button> </スロット> </div> <input type="file" class="file-input d-none" name="file" ref="uploadInput" @change="hanldeInput"/> </div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent、ref、PropType、watch} をインポートします。 'axios' から axios をインポートします タイプ UploadStatus = '準備完了' | '読み込み中' | '成功' | 'エラー' タイプ FunctionProps = (file:File) => ブール値 エクスポートデフォルトdefineComponent({ 名前: 'アップロード'、 継承属性: false、 小道具: { // アップロードURL アクション: { タイプ: 文字列、 必須: true }, // アップロード前の検証、ブール値を返す関数 beforeUpload: { タイプ: Function as PropType<FunctionProps> }, // アップロードされたデータ。ステータスの決定や表示の初期化に使用されます。uploadedData: { タイプ: オブジェクト } }, 出力: ['file-uploaded-success', 'file-uploaded-error'], セットアップ(props, ctx) { const uploadInput = ref<null | HTMLInputElement>(null) const fileStatus = ref<UploadStatus>(props.uploadedData ? '成功' : '準備完了') const ファイルデータ = ref(props.uploadedData) watch(() => props.uploadedData、(val) => { if (値) { fileStatus.value = '成功' ファイルデータ.値 = val } }) const トリガーアップロード = () => { アップロード入力値の場合{ アップロード入力値クリック() } } const hanldeInput = (e:Event) => { const target = e.target を HTMLInputElement として const ファイル = ターゲット.ファイル console.log(ターゲット) if (ファイル) { const uploadFile = Array.from(ファイル) 定数validateFormat = props.beforeUpload ? props.beforeUpload(uploadFile[0]) : true if (!validateFormat) 戻り値 fileStatus.value = '読み込み中' const フォームデータ = 新しいフォームデータ() formData.append('ファイル', uploadFile[0]) を追加します。 axios.post(props.action, フォームデータ, { ヘッダー: { 'コンテンツタイプ': 'マルチパート/フォームデータ' } }).then(res => { console.log('ファイルが正常にアップロードされました', res) fileStatus.value = '成功' ファイルデータ.値 = res.data ctx.emit('ファイルのアップロード成功', res.data) }).catch(エラー => { console.log('ファイルのアップロードに失敗しました', エラー) fileStatus.value = 'エラー' ctx.emit('ファイルアップロードエラー', エラー) }).finally(() => { console.log('ファイルのアップロードが完了しました') アップロード入力値の場合{ アップロード入力値.value = '' } }) } } 戻る { アップロード入力、 トリガーアップロード、 ハンドル入力、 ファイルステータス、 ファイルデータ } } }) </スクリプト> 使用例: <テンプレート> <div class="投稿ページを作成"> <アップロード アクション="/アップロード" :beforeUpload="アップロード前" :uploadedData="アップロードされたデータ" @file-uploaded-success="アップロード成功" クラス="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4" > <テンプレート #uploaded="slotProps"> <div class="アップロードされたエリア"> <img :src="slotProps.uploadedData.data.url"/> <h3>クリックして再アップロード</h3> </div> </テンプレート> <テンプレート #デフォルト> <h2>クリックしてヘッダー画像をアップロード</h2> </テンプレート> <テンプレート #読み込み中> <div class="d-flex"> <div class="spinner-border text-secondary" role="status"> <span class="sr-only"></span> </div> </div> </テンプレート> </アップロード> </div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent、ref、onMounted} をインポートします。 '../components/Upload.vue' からアップロードをインポートします。 '../components/createMessage' から createMessage をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'CreatePost', コンポーネント: { アップロード }, 設定() { const uploadedData = ref() //レスポンシブデータを作成する let imageId = '' マウント時(() => { .... // ここではロジックは省略し、初期化データイメージを取得します if (画像) { uploadedData.value = { データ: 画像 } } }) // アップロード前に検証し、ブール値を返します const beforeUpload = (file:File) => { const res = beforeUploadCheck(ファイル、{ フォーマット: ['image/jpeg', 'image/png'], サイズ: 1 }) const { エラー、合格 } = res if (エラー === 'フォーマット') { createMessage('アップロードできる画像は JPG/PNG 形式のみです!', 'error') } if (エラー === 'サイズ') { createMessage('アップロードされた画像のサイズは 1MB を超えることはできません', 'error') } 返品は合格しました } // アップロードが成功したら、フォームの作成などの後続の処理のために imageId を取得できます。const hanldeUploadSuccess = (res:ResponseProps<ImageProps>) => { createMessage(`画像ID ${res.data._id} をアップロード`, '成功') (res.data._id)の場合{ 画像ID = res.data._id } } 戻る { アップロード前、 アップロード成功、 アップロードされたデータ } } }) </スクリプト> <スタイル> .投稿ページを作成する{ パディング:0 20px 20px; } .投稿ページを作成 .アップロードボックス{ 高さ:200px; カーソル: ポインタ; オーバーフロー: 非表示; } .create-post-page .upload-box img{ 幅: 100%; 高さ: 100%; オブジェクトフィット: カバー; } .アップロードされたエリア{ 位置: 相対的; } .uploaded-area:hover h3{ 表示: ブロック; } .アップロードエリア h3{ 表示: なし; 位置: 絶対; 色: #999; テキスト配置: 中央; 幅: 100%; トップ:50% } </スタイル> 以上がVueのアップロードコンポーネント実装の詳細です。Vueアップロードコンポーネントの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: Windows 64 ビットでの MySQL 8.0.13 のインストールと設定方法のグラフィック チュートリアル
>>: CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図
この記事では、ソシュールの言語哲学などの理論に基づいて、CSS の class 属性は不要であると主...
序文Intel のハイパースレッディング テクノロジーにより、1 つの物理コア上で 2 つのスレッド...
質問特定の MySQL 接続について、それがどのクライアント プロセスからのものであるかをどのように...
このブログでは、Docker をインストールするプロセスを簡単な手順で説明します。Docker のイ...
#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....
もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...
1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...
目次CSS3 ボックスモデルa. CSS3 フィルターb. CSS3 calc関数c. CSS3 ト...
この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...
mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...
目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...
目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...
環境: 10.12 の新機能Python 3.6 MySQL 5.7.25 の場合ジャンゴ 2.2....
目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...
私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....