Ant Vue 下载模块，批量导入

最新推荐文章于 2024-03-10 10:01:50 发布

奥特曼老师

最新推荐文章于 2024-03-10 10:01:50 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Principal_Z/article/details/121946132

版权

Ant Design of Vue 专栏收录该内容

3 篇文章

订阅专栏

这段代码展示了如何使用Ant Design Vue库创建一个批量导入功能的对话框，包括下载模板、上传文件及处理导入操作。用户可以点击上传按钮选择文件，并在准备好后开始导入。导入过程显示加载状态，成功或失败后会有相应的提示。此组件涉及到文件操作、HTTP请求以及状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <a-modal
        title="批量导入"
        width="600px"
        :visible="visible"
        @cancel="handleCancel"
    >
        <div>
            <div>
                <label>文件模板：</label>
                <a-button type="primary" @click="download" icon="download"> 下载模板 </a-button>
            </div>
            <br />
            <div>
                <label>上传文件：</label>
                <a-upload
                    name="file"
                    :multiple="false"
                    :fileList="fileList"
                    :remove="handleRemove"
                    :beforeUpload="beforeUpload"
                >
                    <a-button> <a-icon type="upload" /> 选择文件 </a-button>
                </a-upload>
            </div>
        </div>

        <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
            <a-button type="primary" @click="handleImport" :disabled="fileList.length === 0" :loading="uploading">
                {{ uploading ? '上传中...' : '开始上传' }}
            </a-button>
        </template>
    </a-modal>
</template>

<script>
import Vue from 'vue'
// 上传组件 header 需要存入 token
import { ACCESS_TOKEN } from '@/comment/index'
export default {
    data() {
        return {
            headers: null,
            visible: false,
            fileList: [],
            down: '下载模板接口',
            upload: '导入接口',
            uploading: false,
        }
    },
    created() {
        const token = Vue.ls.get(ACCESS_TOKEN)
        this.headers = { 'X-Access-Token': token }
    },
    methods: {
        show(name) {
            this.uploading = false
            this.visible = true
            this.fileList = []
        },
        download() {
        	window.open(this.down)
        },
        handleCancel() {
            this.visible = false
        },
        // 移除文件
        handleRemove(file) {
            const index = this.fileList.indexOf(file)
            const newFileList = this.fileList.slice()
            newFileList.splice(index, 1)
            this.fileList = newFileList
        },
        beforeUpload(file) {
   			// 保持文件数组中只能存储一个文件
            this.fileList = [file]
            return false
        },
        // 只有点击上传按钮，才能发送接口
        handleImport() {
            const { fileList } = this
            const formData = new FormData()

            fileList.forEach((file) =>  formData.append('file', file) })
            this.uploading = true
            this.$post(this.upload, formData).then((res) => {
                this.uploading = false
                if (res.success) {
                    this.visible = false
                    this.$message.success('导入上传成功')
                } else {
                    this.$message.warning('导入上传失败')
                }
            })
        },
    },
}
</script>

完整效果
在这里插入图片描述