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 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

推薦する

HTML テーブルタグチュートリアル (7): 背景色属性 BGCOLOR

テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...

Vue cli開発に基づく外部コンポーネントVantのデフォルトスタイルの変更の詳細な説明

目次序文1. 少ない2. コンポーネントをインポートする3. 設定ファイルを変更するステップ1: l...

ホストサービスにアクセスするDockerでのサービスの実装

目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...

Dockerイメージ送信コマンドcommitの動作原理と使い方の詳細な説明

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

MySql5.7.18 の文字セット構成の詳細なグラフィック説明

背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...

MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

この記事では、MySQL の null (IFNULL、COALESCE、NULLIF) に関連する...

Vue 関数のアンチシェイクとスロットリングの正しい使用方法

序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...

SQL 実践演習: オンライン モール データベース ユーザー情報データ操作

オンラインショッピングモールデータベース - ユーザー情報データ運用プロジェクトの説明電子商取引の台...

nginxとlvsのメリットとデメリット、そして適切な使用環境

まず最初に、ロード バランシングとは何かについて説明します。ロード バランシングとは、リクエストの内...

JavaScriptはスライダーを介してWebページの色を変更することを実装します

みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...

携帯電話番号の歩数記録を取得するWeChatアプレット

序文最近、小さなプログラムを開発しているときに、このような問題に遭遇しました。ユーザーが認証をクリッ...

JavaScript でよく使われるいくつかの文字列メソッドの概要 (初心者必読)

JavaScriptでよく使われるいくつかの文字列メソッド文字列は読み取り専用データです。よく使用...

ubuntu16.04でNFSサービスを構築する方法

NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...

TinyEditorはシンプルで使いやすいHTML WYSIWYGエディタです

数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...