zoukankan      html  css  js  c++  java
  • 在vue项目中使用element-ui的Upload上传组件

    <el-upload
                   v-else
                   class='ensure ensureButt'
                   :action="importFileUrl"
                   :data="upLoadData"
                   name="importfile"
                   :onError="uploadError"
                   :onSuccess="uploadSuccess"
                   :beforeUpload="beforeAvatarUpload"
                   >
                   <el-button size="small" type="primary">确定</el-button>

    其中importFileUrl是后台接口,upLoadData是上传文件时要上传的额外参数,uploadError是上传文件失败时的回掉函数,uploadSuccess是文件上传成功时的回掉函数,beforeAvatarUpload是在上传文件之前调用的函数,我们可以在这里进行文件类型的判断。

    data () {
        importFileUrl: 'http:dtc.com/cpy/add',
        upLoadData: {
            cpyId: '123456', 
            occurTime: '2017-08'
        }
    },
    methods: {
        // 上传成功后的回调
        uploadSuccess (response, file, fileList) {
          console.log('上传文件', response)
        },
        // 上传错误
        uploadError (response, file, fileList) {
          console.log('上传失败,请重试!')
        },
        // 上传前对文件的大小的判断
        beforeAvatarUpload (file) {
          const extension = file.name.split('.')[1] === 'xls'
          const extension2 = file.name.split('.')[1] === 'xlsx'
          const extension3 = file.name.split('.')[1] === 'doc'
          const extension4 = file.name.split('.')[1] === 'docx'
          const isLt2M = file.size / 1024 / 1024 < 10
          if (!extension && !extension2 && !extension3 && !extension4) {
            console.log('上传模板只能是 xls、xlsx、doc、docx 格式!')
          }
          if (!isLt2M) {
            console.log('上传模板大小不能超过 10MB!')
          }
          return extension || extension2 || extension3 || extension4 && isLt2M
        }
    }
  • 相关阅读:
    网络信息安全攻防学习平台第7题
    深入理解读写锁ReentrantReadWriteLock
    彻底理解ReentrantLock
    (三)应该了解关于并发相关的概念
    (二)并发编程的优缺点
    Linux Makefile多目录的编写
    libcurl 下载上传
    MFC枚举USB设备碰到的一个疑难,还没解决
    MFC一个令人纠心的错误
    如何为你的App获取用户的反馈和5星级评论
  • 原文地址:https://www.cnblogs.com/xiaomili/p/8302883.html
Copyright © 2011-2022 走看看