elementUI+Vue 验证上传文件的类型

1. 验证上传文件的类型

（1）验证图片类型

（2）限制文件大小及其类型为压缩包

    点击上传

 
methods: {
    beforeAvatarUpload (file) {
        let fileName = file.name
        let pos = fileName.lastIndexOf('.')
        let lastName = fileName.substring(pos, fileName.length)
        if (lastName.toLowerCase() !== '.zip' &&lastName.toLowerCase() !== '.rar') {
            this.$message.error('文件必须为.zip或者.rar类型')
            // this.resetCompressData()
            return
        }
        // 限制上传文件的大小
        const isLt =
        file.size / 1024 / 5 >= 1 && file.size / 1024 / 1024 / 100 <= 1
        if (!isLt) {
            this.$message.error('上传文件大小不得小于5KB,不得大于100MB!')
        }
        return isLt
    }
}

（3）验证.txt文件也类似

    上传关键字

 
beforeAvatarUpload (file) {
    let fileName = file.name
    let pos = fileName.lastIndexOf('.')
    let lastName = fileName.substring(pos, fileName.length)
    if (lastName.toLowerCase() !== '.txt') {
        this.$message.error('请上传.txt文件类型')
    }
}

2.简单的表单验证处理

    ....

 

3.回车提交内容

原生的input，使用 @keyup.enter就可以：
原生：
但使用element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了：
element-ui：

 
submit () {
    const isLength = this.keyWord.length
    if (isLength > 30) {
        this.$message.error('超长关键词无法添加!')
        return
    }
    this.keyWord = ''     //enter提交之后清空输入框的内容
}

注：取消则使用@submit.native.prevent：例 取消输入框中按下回车提交该表单的默认行为

4.设置路由 this.$router.push({}):

取消
 
cancel () {
    this.$router.push({
        path: '/customCrowd'
    })
}

5. 禁用属性

:disabled="true"

注：在vue中this的使用：this是指整个当前的文档；使用vue框架时script中不能使用冒号；在script中的内容必须使用单引号不能使用双引号；定义函数方法时要注意留出一个空格；避免定义未用到的变量；建议单独建立一个全局的样式文档static/css/下，因为很多时候框架默认样式权值更大，直接在当前文件中设置css样式不起作用，但是要加上该文本的类名，避免影响其他区域；另外，style标签中scoped的作用是表明以下定义的内容只在该区域中生效

6.使用vue的watch监听数据传输中的变化

watch:{
  'typeLink':function (a,b) {
    console.log(a,b)
  }
}

原贴：https://www.cnblogs.com/prospective-zkq/p/10066530.html