Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

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

メソッド: {
    // ファイルをアップロードする前にフックします。アップロードされたファイルの形式とサイズを判別し、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)
    }
}