zoukankan      html  css  js  c++  java
  • element-ui --upload 上传组件

    <el-upload
    class="upload-demo"
    :action="后台接收地址"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="refreshData"
    :on-error="OnError"
    :headers="setHeader()"
    :data="setData()"
    :before-upload="beforeUpload"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
    >
    <el-button size="small" type="primary" @click="clickBefore">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传csv文件,且每个大小不能超过100Mb</div>
    </el-upload>


    函数:
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {},
    // 上传时附带的额外参数
    setData() {
    return {
    'project_id': this.analyseForm.project_id
    }
    },
    // 设置上传的请求头部
    setHeader() {
    let org_id = ''
    for (let i = 0; i < this.projectArr.length; i++) {
    if (this.projectArr[i].id === this.analyseForm.project_id) {
    org_id = this.projectArr[i].org_id
    break
    }
    }
    const token = JSON.parse(sessionStorage.getItem('token'))
    const info = JSON.parse(sessionStorage.getItem('info'))
    return {
    'x-requested-org': org_id,
    'token': token,
    'account_id': info.account_id
    }
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {},
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 文件上传成功时的钩子
    refreshData() {
    this.getBillingHistory()
    },
    // 文件上传失败时的钩子
    OnError(err, file, fileList) {
    this.$message.error('文件上传失败')
    },
    clickBefore() {
    if (this.analyseForm.project_id === '') {
    this.$message.error('请选择项目')
    }
    },
    // 上传文件之前的钩子
    beforeUpload(file) {
    if (this.analyseForm.project_id === '') {
    return false
    } else {
    if (file.type === 'text/csv') {
    // return true
    if (file.size / 1024 / 1024 < 100) {
    return true
    } else {
    this.$message.error('上传文件大小不能超过 100MB!')
    return false
    }
    } else {
    this.$message.error('请上传csv文件!')
    return false
    }
    }
    },
    // 删除文件之前的钩子
    beforeRemove(file, fileList) {
    if (file.type === 'text/csv' && file.size / 1024 / 1024 < 100) {
    return this.$confirm(`确定移除 ${file.name}?`)
    }
    },




  • 相关阅读:
    [Javascript Crocks] Apply a function in a Maybe context to Maybe inputs (curry & ap & liftA2)
    Error: 17053 LogWriter: Operating system error 21(The device is not ready.)
    PPS2013校园招聘笔试题
    RobotFrameWork(十一)AutoItLibrary测试库在win7(64bit)下安装及简单使用
    iOS 5 故事板入门(3)
    Eclipse代码字体、颜色美化,更改字体大小、颜色
    iOS 5 故事板入门(4)
    54. 如何在测试中触发服务器上运行的代理
    【PHP SDK for OpenStack/Rackspace APIs】身份验证
    JQuery总结
  • 原文地址:https://www.cnblogs.com/zhou-xm/p/12664159.html
Copyright © 2011-2022 走看看