概要具体的な需要シナリオは次のとおりです。 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 サーバーをインストールする方法のグラフィック チュートリアル
現在、アプリケーション開発は基本的にフロントエンドとバックエンドに分離されています。主流のフロントエ...
この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細...
Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...
説明する: fuser は、現在ディスク上のファイル、マウント ポイント、さらにはネットワーク ポー...
「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...
ポートマッピングDocker コンテナを起動する前にポート マッピングを行わないと、コンテナ外部のネ...
以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...
目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...
<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...
これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...
1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...
Netease Kanyouxi公式サイト(http://kanyouxi.163.com/)(棚...
目次導入js のイテレータはどのように見えるか反復プロトコル反復可能なプロトコルイテレータプロトコル...
ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...