Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

概要

具体的な需要シナリオは次のとおりです。

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>

で:

  • action: アップロードされたアドレス。あまり気にする必要はありませんが、削除することはお勧めしません。代わりに通常の文字列を使用できます。
  • 自動アップロード: 自動アップロードするかどうか。これは手動アップロードなので、false に設定します。
  • multiple: 複数選択をサポートするかどうか。ここでは false に設定
  • file-list: アップロードされたファイルのリスト配列
  • before-upload: ファイルをアップロードする前のフック。パラメータはアップロードされたファイルです。ここでアップロードされたファイルのタイプとサイズを判断できます。
  • http-request: アップロード方法をカスタマイズします。これにより、デフォルトのアップロード動作がオーバーライドされます (例: action="url")
  • on-remove: アップロードされたファイルが削除されたときに実行されるメソッド
  • on-change: アップロードされたファイルのステータス(追加、アップロード成功、または失敗)が変更されたときにトリガーされるメソッド

処理ロジック

ロジック処理コードは次のとおりです。

メソッド: {
    // ファイルをアップロードする前にフックします。アップロードされたファイルの形式とサイズを判別し、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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • element-ui の el-upload を使用して複数のファイルを一度にアップロードする実装
  • 複数ファイルのアップロードのElement-ui実装例
  • vue+element_uiはファイルをアップロードし、追加のパラメータを渡します
  • Vue elementUI はバッチファイルのアップロードを処理します

<<:  mysql ローカルログインでポート番号を使用してログインできない問題の解決策

>>:  Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

推薦する

Vueのトランジションとアニメーションの深い理解

1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

PHPのmail()関数を使用してメールを送信する

PHPのメール関数を使用してメールを送信するmail()関数はメールサーバーに接続し、サーバーと対話...

vue3.0 のウォッチ リスナーの例の詳細な説明

目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...

MySQLデータのバックアップ方法の選択と考え方

目次1. rsync、cpでファイルをコピーする2. xxxをoutfile構文に選択する3. 遅延...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

MySQLで重複データを削除する詳細な例

MySQLで重複データを削除する詳細な例重複レコードには 2 つの意味があります。1 つは完全に重複...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...

Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...

Docker で Java 8 Spring Boot アプリケーションを開発する方法

この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...

MySQL無料インストールバージョンの設定チュートリアル

この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...