后台管理项目的导入、导出数据的实现

需求：实现列表数据的导入导出，导入时弹框选择文件（可多选）

静态页面的实现：

<template>
    <div>
        <div>
        <el-button @click="handleMultiple">导入</el-button>
        <el-button @click="exportData">导出</el-button>
        </div>
        <el-dialog title="导入数据" :visible.sync="dialogFormVisible">
            <el-upload
                ref="uoload" 
                drag 
                action="/" 
                :on-remove="handleRemove" 
                :on-exceed="handleExceed"
                :on-change="handleChange"
                :http-request="customUpload"
                :limit="1"
                :file-list="fileList"
            >
                <div>将文件拖拽到此处，或<em>点击上传</em></div>
                <div>请使用最新的模板进行数据导入</div>
            </el-upload>
            <span>
                <el-button type="primary" @click="download">下载模板</el-button>
                <el-button @click="cancle">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

Script实现

<script>
    const importUrl = window.global.baseUrl + '导入数据接口'
    const exportUrl = window.global.baseUrl + '导出数据接口'
    const downloadUrl = window.global.baseUrl + '模板下载接口'
    
    export default {
        name: ''
        data () {
            return {
                dialogFormVisible: false, // 上传弹框是否显示
                uploadFile: [], // 上传的文件
                fileList: []
            }
        },
        methods: {
            // 点击导入
            handleMultiple () {
                this.uploadFile = [] // 自定义文件列表为空
                this.fileList = [] // 上传的文件列表为空
                this.dialogFormVisible: true // 显示上传弹框
            },
            // 添加文件、显示上传的文件
            handleChange (file, fileList) {
                this.fileName = fileList[0].name // 上传文件的名称
                this.fileList = fileList // 上传文件的列表
            },
            // 上传
            async upload () {
                const formData = new FormData()
                // 上传的文件
                await this.uploadFile.forEach((function (file) {
                    formData.append('file', file, file.name)
                })
                util.toggleLoading('show')
                // 导入文件
                await util.httpAjax({
                    url: importUrl,
                    method: 'post',
                    data: formData,
                    withCreddentials: true,
                    headers: { 'Content-Type': 'multipart/form-data', 'Warning': '200', 'Authorization': sessionStorage.getItem('token') }
                }).then((res) => {
                    this.fileList = []
                    this.uploadFile = []
                }).catch(e => {
                    this.$message({ message: e.message || '处理失败', type: 'warning' })
                })
                setTimeout(() => { util.toggleLoading('hide') }, 100)
            },
            // 文件列表移除文件
            handleRemove (file, fileList) {
                this.fileList = fileList
                this.uploadFile.forEach((e, i) => e.name === file.name && this.uploadFile.splice(i, 1))
            },
            // 上传文件个数提示
            handleExceed (file, fileList) {
                this.$message.warning('只能上传单个文件')
            },
            // 自定义上传文件
            async customUpload (params) {
                this.uploadFile.push(params.file)
            },
            // 上传弹框点击确认，关闭弹框
            async confirm () {
                try {
                    if (this.fileName) {
                        await this.upload(this.file, this.fileName) // 调用上传upload
                        this.dialogFormVisible = false // 关闭上传弹框
                    } else {
                        this.$message({ message: '请上传文件', type:'warning' })
                    }
                } catch (err) {}
            },
            // 上传弹框点击取消，关闭弹框
            cancle () {
                this.uploadFile = [] // 清空自定义文件列表
                this.fileList = [] // 清空上传的文件列表
                this.dialogFormVisible = false // 关闭上传弹框
            },
            // 点击下载模板
            async download () {
                try {
                    await util.httpPost(downloadUrl) // 模板下载接口
                } catch (err) {
                    this.$message({message: '下载失败', type: 'warning'})
                }
            },
            // 导出
            async exportData () {
                try {
                    await util.httpPost(exportUrl, this.grid.filter)
                } catch (err) {
                    this.$message({message: '下载失败', type: 'warning'})
                }
            }
        }
    }
</script>