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プロジェクトでスケルトンスクリーンを使用する方法

現在、アプリケーション開発は基本的にフロントエンドとバックエンドに分離されています。主流のフロントエ...

Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細...

Ubuntu での MySQL および MySQL Workbench のインストール チュートリアル

Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...

...

Linux での fuser コマンドの使用法の詳細な説明

説明する: fuser は、現在ディスク上のファイル、マウント ポイント、さらにはネットワーク ポー...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...

Docker プライマリ ネットワーク ポート マッピング構成

ポートマッピングDocker コンテナを起動する前にポート マッピングを行わないと、コンテナ外部のネ...

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

JSはスネークゲームを実装する

目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...

2008 年の Web デザインにおける 10 の経験

<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...

VPSサーバーでよく使われるパフォーマンステストスクリプトの概要

これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...

Dockerはローカルディレクトリとデータボリュームコンテナ操作をマウントします

1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...

CSS3を使用してヘッダーアニメーション効果を作成する

Netease Kanyouxi公式サイト(http://kanyouxi.163.com/)(棚...

JavaScriptイテレータを学ぶ

目次導入js のイテレータはどのように見えるか反復プロトコル反復可能なプロトコルイテレータプロトコル...

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...