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

<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>

<スクリプト>
    // '@/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;
                })
			},
        }
    }