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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL マスター/スレーブ データベース同期構成と一般的なエラー
>>: WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法
<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...
この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...
目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...
サーバー情報管理サーバー: m01 172.16.1.61サーバー: nfs01 172.16.1....
注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...
目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...
この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...
esインストール docker pull elasticsearch:7.4.0 # -d : バッ...
タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...
Webページを作るときに、区切り線hrを使うことがありますが、IE6やIE7で表示するのは非常に苦痛...
この記事では、CentOSでのMySQLの完全アンインストールについて記録しています。具体的な内容は...
目次1. 目的2. 文法3. 練習する1. 目的通常、エラーが発生すると、スクリプトは直ちに停止し、...
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...