概要具体的な需要シナリオは次のとおりです。 Excel ファイルを選択したら、インポートした Excel ファイルをバックエンド サーバーに手動でアップロードし、インポートが成功した後に統計結果を表示する必要があります。公式サイトには、action="url" でアドレスを渡す手動アップロードの例もありますが、実際のプロジェクトでは、リクエストを自分で設定する必要があります。その方法を次に説明します。 例: ファイルのアップロードから統計結果の表示まで、バックエンドは 2 つのインターフェースを提供します。まず、ファイル アップロード インターフェースを呼び出し、アップロードが成功した後、バックエンドから返されたマークに基づいて統計結果インターフェースを呼び出します。 プロパティ設定.vue ファイル <el-行> <div class="el-form-item__content"> <el-upload ref="アップロード" accept=".xls,.xlsx" アクション="#" :自動アップロード="false" :multiple="false" :file-list="ファイルリスト" :before-upload="アップロード前" :http-request="アップロードHttpリクエスト" :on-remove="ファイル削除" :on-change="ファイル変更"> <el-button size="small" type="primary">ファイルを選択</el-button> <div slot="tip" class="el-upload__tip">一度にアップロードできる xls/xlsx ファイルは 1 つだけです。ファイル サイズは 10 MB を超えてはなりません。</div> </el-アップロード> </div> </el-row> <el-行> <el-button size="small" @click="closeDialog">キャンセル</el-button> <el-button type="primary" size="small" @click="submitUpload">アップロード</el-button> <el-button type="primary" size="small" @click="downloadRes">フィードバック結果をダウンロード</el-button> </el-row> で:
処理ロジックロジック処理コードは次のとおりです。 メソッド: { // ファイルをアップロードする前にフックします。アップロードされたファイルの形式とサイズを判別し、false が返された場合はアップロードを停止します beforeUpload(file) { //ファイルタイプ const isType = file.type === 'application/vnd.ms-excel' const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' const fileType = isType || isTypeComputer if(!fileType) { this.$message.error('アップロードできるファイルは xls/xlsx 形式のみです!') } // ファイルサイズの制限は10Mです 定数ファイル制限 = ファイル.size / 1024 / 1024 < 10; ファイル制限がある場合 this.$message.error('アップロードされたファイルのサイズは10Mを超えていません!'); } fileType && fileLimit を返す }, // カスタムアップロードメソッド、paramはデフォルトのパラメータで、ファイル情報を取得できます。具体的な情報は次のとおりです。uploadHttpRequest(param) { const formData = new FormData() //FormData オブジェクト、パラメータの追加は append('key', value) を通じてのみ実行できます formData.append('file', param.file) //ファイル オブジェクトを追加します formData.append('uploadType', this.rulesType) const url = `${this.myBaseURL}/operation/ruleImport/importData` //アップロードアドレス axios.post(url, formData) .then( レス => { const { データ: { コード、マーク } } = res if(コード === 0) { param.onSuccess() // 正常にアップロードされたファイルには緑のチェックマークが表示されます this.uploadMark = mark } return this.countData(this.uploadMark) // 応答マーク値に応じて統計結果インターフェースを呼び出し、チェーン呼び出しのプロミスを返します}) .then( res => { //チェーン呼び出し、統計結果への応答 const { data: { code, data } } = res if(コード === 0) { console.log('統計結果', データ) } }) .catch(エラー => { console.log('失敗', エラー) param.onError() //アップロードに失敗したファイルはファイルリストから削除されます}) }, // 統計結果 countFile(mark) { 新しい Promise を返します ((resolve, reject) => { アクシオス .get(`/operation/ruleImport/countData?mark=${mark}`) .then(res => { 解決する }) .catch(エラー => { 拒否(エラー) }) }) }, // クリックしてアップロード: 手動でサーバーにアップロードすると、コンポーネントの http リクエストがトリガーされます アップロードを送信します(){ this.$refs.upload.submit() }, // ファイルが変更されます fileChange(file, fileList) { ファイルリストの長さが0より大きい場合 this.fileList = [fileList[fileList.length - 1]] // 最後に選択したファイルを表示します} }, // 選択したファイルを削除します fileRemove(file, fileList) { ファイルリストの長さが1未満の場合 this.uploadDisabled = true // ファイルが選択されていない場合はアップロードボタンを無効にします} }, //キャンセルcloseDialog() { this.$refs.upload.clearFiles() //アップロードされたファイルオブジェクトをクリアします this.fileList = [] //選択されたファイルリストをクリアします this.$emit('close', false) } } http-request の param パラメータは図のように出力されます。 param.file を通じて現在のファイル オブジェクトを取得します。 上記は、Vue ElementUI を使用して Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明です。Vue ElementUI を使用して Excel ファイルを手動でサーバーにアップロードする方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: mysql ローカルログインでポート番号を使用してログインできない問題の解決策
>>: Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル
1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...
脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...
PHPのメール関数を使用してメールを送信するmail()関数はメールサーバーに接続し、サーバーと対話...
目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...
目次1. rsync、cpでファイルをコピーする2. xxxをoutfile構文に選択する3. 遅延...
目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...
序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...
MySQLで重複データを削除する詳細な例重複レコードには 2 つの意味があります。1 つは完全に重複...
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
1. <div></div> と <span></spa...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...
1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...
この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...
この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...