zoukankan      html  css  js  c++  java
  • element-ui-——el-uploadexcel导入

    布局文件:(选择文件放在了弹框内部——即点击导入按钮后弹框显示,先下载模板再选择文件点击提交按钮才上传)

    <div class="emImport_container">
    <el-dialog :title="meta.title" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
    <el-upload
    :ref="system_id"
    v-loading="uploadLoading"
    class="upload-demo"
    :action="action" (action: 导入文件的url地址)
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :headers="headers" (headers: 请求头)
    name="file" (文件名)
    accept=".xlsx "
    :on-error="uploadFileError"
    :on-success="uploadFileSuccess"
    :auto-upload="false"
    :http-request="uploadFile"
    :on-change="fileChange"
    >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="downloadModel">下载模板</el-button>
    <div slot="tip" class="el-upload__tip">请先下载模板,再选择文件上传!</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
    <el-button class="em-button" @click="cancelUpload">取 消</el-button>
    <el-button type="primary" class="em-button" @click="submitUpload">提交</el-button>
    </div>
    </el-dialog>
    </div>

     模板下载及文件导入:


    <script>
    import vueBus from '@/utils/vueBus'
    import { emMixin } from '@/utils/mixins'
    import { dataInitFn, childrenInitFn } from '@/utils/tool'
    import { uploadFile } from '@/api/schoolService/parentInfo'
    export default {
    name: 'EmImport',
    mixins: [emMixin],
    data() {
    return {
    set: {
    downloadUrl: '', // 模板下载url地址
    importUrl: ''// 导入文件url地址
    },
    fileList: [], // 文件列表
    dialogFormVisible: false,
    headers: {
    'Content-Type': 'multipart/form-data'
    },
    uploadLoading: '',
    action: '',
    files: [] // 选择文件
    }
    },
    created() {
    this.init()
    },
    methods: {
    init() {
    this.set = dataInitFn(this.set, this.meta)
    this.children = childrenInitFn(this.children, this.componentData)
    },
    handleRemove(file, fileList) {
    console.log(file, fileList)
    },
    handlePreview(file) {
    console.log(file)
    },
    uploadFileError(err, file, fileList) {
    console.log(err)
    this.$message.error('文件导入失败')
    },
    uploadFileSuccess(response, file, fileList) {
    console.log(response.data.jsonmsg.ERRORMSG)
    if (response.data.jsonmsg.ERRORMSG === '') {
    this.$message({
    message: '恭喜你,导入成功',
    type: 'success'
    })
    this.init()
    this.dialogFormVisible = false
    } else {
    this.$message({
    message: response.data.jsonmsg.ERRORMSG.slice(response.data.jsonmsg.ERRORMSG.indexOf('=') + 1),
    type: 'error'
    })
    }
    },
    downloadModel() { // 下载导出需要的模板
    window.location.href = process.env.VUE_APP_BASE_API + this.set.downloadUrl // process.env.VUE_APP_BASE_API :基础地址(env.development文件中的 base api地址


    },
    // 导入csv
    import() {
    this.dialogFormVisible = true
    this.action = process.env.VUE_APP_BASE_API + this.set.importUrl // 尤为重要,否则action是没有值的
    },
    fileChange(file) {
    this.files.push(file.raw) // 上传文件变化时将文件对象push进files数组
    },
    // 上传文件
    uploadFile(params) {
    if (this.files) {
    const formData = new FormData() // new一个formData对象
    this.files = params.file (这里一定是params.file,传递给后台的应是file:(binary); 不是this.files,,否则传递给后台的是file:Undefined)
    formData.append('file', this.files)
    uploadFile({
    url: process.env.VUE_APP_BASE_API + this.set.importUrl, //导入文件地址
    params: formData (参数必须是formData)
    }).then(response => {
    console.log('导入结果', response)
    if (response.statusCode === 200) {
    this.$notify({
    message: '数据导入成功',
    type: 'success'
    })
    this.dialogFormVisible = false
    vueBus.$emit('query')
    } else {
    this.$notify.error('数据导入失败')
    }
    })
    }
    },
    submitUpload(event) {
    this.$refs[this.system_id].submit() // 提交按钮
    },
    cancelUpload() {
    this.dialogFormVisible = false
    this.$message.info('已取消上传')
    }
    }
    }
    </script>
    接口地址:
    export function uploadFile(obj) {
    return request({
    url: obj.url,
    method: 'post',
    data: obj.params
    })
    }

    总结:请求头格式一定是:content-Type:multipart/form-data;  否则导入会失败;传递的参数:params一定是formData(表单对象)
    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    poj 3528 (三维几何求凸包+凸包表面积)
    dijkstra模板(好像是斐波那契额堆优化,但我为什么看起来像优先队列优化,和spfa一样)
    最大空凸包模板
    ICPC 2017–2018, NEERC, Northern Subregional Contest St Petersburg, November 4, 2017 I题
    hdu 5248 序列变换
    hdu 2063(二分图模板测试)
    组合数
    85. Maximal Rectangle 由1拼出的最大矩形
    750. Number Of Corner Rectangles四周是点的矩形个数
    801. Minimum Swaps To Make Sequences Increasing 为使两个数组严格递增,所需要的最小交换次数
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/12036023.html
Copyright © 2011-2022 走看看