Business requirements :(specific requirements can be modified according to business requirements)

1. Export the list data

2. Import local data

Processing flow

1. Extract the back-end interface

2. Logic sorting at the front desk

3. Function realization

The figure above shows the project structure. FileUpLoad is the import and export component, export-Excel-dialog is the option box displayed after the export, UseFileDetail is the parent page containing the import and export components in the actual project, and app. vue is the route exit file.

<template> <div id="file"> <transition enter-active-class="animate__animated animate__wobble" leave-active-class="animate__animated animate__flipOutXs" > <el-row :gutter="20"> <el-col :span="2"> <el-upload class="image-uploader" ref="uploadExcel" :multiple="false" :auto-upload="false" list-type="text" :show-file-list="false"  :on-change="uploadChange" action="bakaction" :limit="1" :on-exceed="handleExceed" :http-request="uploadFile" > <el-button size="mini" type="primary">Excel import </el-button> </el-col> </el-col :span="2"> <el-button Size ="mini" type="primary" @click="exportExcelVisible = true"> </el-button> </el-col> </el-row> </transition> <export-excel-dialog :visible.sync="exportExcelVisible" @export="handleExportExcel"></export-excel-dialog> </div></template>Copy the code

1. Multiple — Whether multiple files are supported

Auto-upload — Whether to upload a file immediately after it is selected

3.list-type– The type of the file list

4. Show-file-list — Whether to display the list of uploaded files

5. On-change — Hook for file state changes, called for file addition, successful upload, and failed upload

6. Action — Set ‘bakAction’ to customize upload events

7. Limit — The maximum number of uploads allowed

8. On-exceed — A hook when a file exceeds the number limit

9. Http-request — overrides the default upload behavior and allows you to customize the upload implementation

Methods: {handleIsExcel(file) {let that = this; Const fileName = file. Raw. Name. Slice (3) / / interception file name three after the if (fileName = = = "LSX" | | fileName = = = "XLS") {that. IsExcel = true that.$emit('update:isExcel',that.isExcel) return true }else { that.isExcel =false That.$emit('update:isExcel', that.isexcel) return false}}, /** * */ uploadChange(file) {let that = this; if(! HandleIsExcel (file)) {that.$message({type: 'error', message: 'upload excel file ', showClose: true }) that.clearFiles() } that.$emit('exelUpload', file.raw) }, /** * handleExceed() {let that = this; That.$message.error(" File upload limit exceeded "); */ uploadFile(item) {let that = this; const file = item.file; const form = new FormData(); // File object form.append("file", file); // let formTwo = JSON.stringify(form) upload('user/importExcel',form).then((response) => { console.log(response); $message.info(" file: "+ file.name +" successfully uploaded "); }); }, /** * clear the upload list */ clearFiles() {let that = this; that.$refs.uploadExcel.clearFiles(); HandleSelectionChange (val){let that = this; handleSelectionChange(val){let that = this; // that.multipleSelection = val; let electSysUserIds = []; if(val) { val.forEach(ele => { electSysUserIds.push(ele.pkid) }); } that.selectUsers = electSysUserIds; }, isSelected() {if(this.selectUsers.length < 1) {this.$message. Warning (" Please check the data to export first ")}}, isSelected() {if(this.selectUsers.length < 1) {this.$message. handleExportExcel(value) { let that = this; let url; if(value === "exportAll") { url = 'user/exportUserExcelByCondition'; window.location.href = url; }else { if(that.isSelected()) { url = 'user/exportUserExcelByIds'; window.location.href = url+"? ids="+that.selectUsers } } } }}Copy the code

Note: Add a block event to ensure that the file passed to the backend is in the correct format

File interface request header set to new FormData()

Logic is not very complex, big guys should understand, there are optimization points welcome message, small key humbly ask for advice ha ~

<template>  <div id="UseFileDetail">        <file-upload @exelUpload="fileImport" :isExcel.sync="isExcel"></file-upload>  </div></template>
Copy the code

In the parent component, the vUE knowledge point involved is the data transfer between father and son.

Click here for the source code