Excelアップロード機能を実現するVue + iViewの完全コード

Excelアップロード機能を実現するVue + iViewの完全コード

1. HTML部分

<Col span="2">ファイルをアップロード:</Col>
<Col span="22" class="uploadExcelBox">
    <アップロード ref="uploadExcel" :loading="uploadLoading" :action="uploadFileUrl" accept="xlsx,xls" :format="uploadFormat" :before-upload="beforeImgFile" :on-success="successImgFile" :on-error="errorImgFile" :show-upload-list="true">
         <Button type="success">添付ファイルをアップロード</Button>
	 </アップロード>
     <div v-if="uploadingFile !== null">アップロードするファイル:
          <span class="blueFont">{{ ファイル名 }}</span>
          <Button @click="uploadFun(index)" :loading="loadingStatus" class="manualUploadBtn">{{ loadingStatus ? 'アップロード中...' : 'クリックしてアップロードを開始' }}</Button>
      </div>
</Col>

2. JS部分

<スクリプト>
    // '@/libs/excel' から Excel をインポートします
	import service from '@/libs/request' //現在のドメイン名を取得するために使用します import reportFormApi from '@/api/reportForm'
    エクスポートデフォルト{
        データ() {
            戻る {
                uploadLoading:false, //アップロードコントロールの読み込みステータス uploadFileUrl: "",
				アップロードフォーマット:['xlsx','xls'],
				uploadingFile:null, //アップロードするファイル loadingStatus:false, //アップロードコンポーネントのステータス fileName:"", //アップロードするファイルの名前}
        },
        マウント() {
            this.uploadFileUrl = service.apiUrl + "/qingximaster/winInfo/execlAdd"; // バックエンド担当者が提供する、Excel をアップロードするためのインターフェイス パス。
        },
        メソッド: {
			// 画像をアップロードする前に beforeImgFile(file) {
				// console.log(ファイル);
				定数 fileExt = file.name.split('.').pop().toLocaleLowerCase()
				ファイル拡張子が 'xlsx' の場合 || ファイル拡張子が 'xls' の場合 {
					var フォームデータ = 新しい FormData();
					formdata.append("ファイル",ファイル);
                    this.fileName = formdata.get('file').name; //formdata.get('file') メソッドを使用すると、Excel ファイル名などのファイル内の情報を取得できます。
					this.uploadingFile = formdata; //注: これはアップロードするインターフェースにパラメータとして渡されます。インターフェイスに渡されるファイルには formdata.get('file') は必要なく、ファイルを直接渡すだけです。
				} それ以外 {
					this.$Notice.warning({
						タイトル: 「ファイルタイプエラー」
						説明: 'ファイル:' + file.name + 'EXCEL ファイルではありません。拡張子が .xlsx または .xls の EXCEL ファイルを選択してください。 '
					})
				}
				偽を返す
			},
			// アップロードに成功しました successImgFile(response, file, fileList) {
                this.$Notice.success({
                    タイトル: 「ヒント」
                    説明: 'アップロードに成功しました! '
                })
			},
			// アップロードに失敗しました errorImgFile(error, file, fileList) {
				this.$Notice.success({
                    タイトル: 「ヒント」
                    説明: 'アップロードに失敗しました! '
                })
				コンソール.log(エラー);
			},
			uploadFun(index){//Excel をアップロードするためのインターフェイスを呼び出す
				this.loadingStatus = true;
				reportFormApi.uploadExcel({
                    URL: this.uploadFileUrl、
                    ファイル: this.uploadingFile
                }).then(res =>{
					this.uploadingFile = null;
                    this.fileName = "";
                    (res.code==0)の場合{
                        this.infoList[index].content = JSON.stringify(res.data);
					    // console.log(this.infoList[index].content);
                        this.$Message.success("アップロードに成功しました!");
                    }それ以外{
                        this.$Message.error(res.message);
                    }
				}).finally(()=>{
					this.loadingStatus = false;
                    this.uploadLoading = false;
                })
			},
        }
    }

3. ページ効果は次の通りです

(1)ページのデフォルトの外観

(2)アップロードするExcelファイルを選択する

(3)「アップロード開始」をクリックした後

上記は、Excel アップロードを実現するための Vue + iView の詳細です。vue iview excel アップロードの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明
  • Vue Excel アップロード プレビューとテーブル コンテンツを Excel ファイルへダウンロード
  • Vue で Excel ファイルのアップロードとダウンロード機能を実装する 2 つの方法
  • Vue+Spring Bootを使用してExcelアップロード機能を実装する
  • vue iView アップロードコンポーネントの手動アップロード機能

<<:  MySQL マスター/スレーブ データベース同期構成と一般的なエラー

>>:  WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

推薦する

デザインストーリー: ナンバープレートを覚えられない警備員

<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...

vue-routerのマッチングに基づいてパンくずリスト機能を実現する

この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

Linux で NFS のワンクリック展開を実装する方法

サーバー情報管理サーバー: m01 172.16.1.61サーバー: nfs01 172.16.1....

HTMLタグの書き方でよくある間違い

注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...

Vue+SpringBoot+Shiroのクロスドメイン問題を解決する

目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...

TypeScript のマップされた型とより優れたリテラル型推論について説明します。

目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...

MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します

Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...

Docker で Elasticsearch Kibana と ik Word Segender をデプロイする詳細な説明

esインストール docker pull elasticsearch:7.4.0 # -d : バッ...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...

ブラウザ間の hr 区切り文字の違い

Webページを作るときに、区切り線hrを使うことがありますが、IE6やIE7で表示するのは非常に苦痛...

CentOS で MySQL を完全にアンインストールする方法

この記事では、CentOSでのMySQLの完全アンインストールについて記録しています。具体的な内容は...

JavaScript エラー処理 try..catch...finally + は throw+TypeError+RangeError をカバーします

目次1. 目的2. 文法3. 練習する1. 目的通常、エラーが発生すると、スクリプトは直ちに停止し、...

WeChatミニプログラムは同時通訳を利用して音声認識を実装します

私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...