vue el-upload 上传文件格式校验方法

 更新时间:2023年11月13日 11:54:50   作者:gyuhao_o  
这篇文章主要介绍了vue el-upload 上传文件格式校验方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue el-upload 上传文件格式校验

<el-upload
  class="avatar-uploader"
  action="#"
  :show-file-list="false"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

1、文件大小验证

      file.size 以字节Byte为单位(Blob类型),1MB=1024KB,1KB=1024Btye

<script>
  export default {
    methods: {
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;  // 小于2M
        if ( !isLt2M ) {
            console.log('文件大小超出2M');
        }
      }
    }
  }
</script>

2、文件格式验证

        文件名后缀是支持大小写的,如.mp4 .Mp4 .mP4 .MP4都是可以正常播放的,所以我们校验的时候通过先将其转成小写,再进行校验。(图片同理)

file.name.split('.')[1].toLowerCase() != 'mp4'; // 视频不是.mp4格式的
let formatArr = ['image/png','image/jpg','image/jpeg'];
const isPic = ( formatArr.indexOf(file.type.toLowerCase()) != -1 );  // 是否为图片

3、视频时长验证

        函数可以直接使用,file为el-upload上传的file文件;得到的结果单位为秒,保留两位小数。

// 获取视频文件时长
getVideoTime(file){
    return new Promise((resolve, reject) => {
        let url = URL.createObjectURL(file);
        let audioElement = new Audio(url);
        audioElement.addEventListener('loadedmetadata',function(_event){
            const time = Math.round(audioElement.duration * 100) / 100;   // 时长为秒,保留两位小数
            resolve(time);
        });
        audioElement.addEventListener('error', () => resolve(0));
    })
},

el-upload上传文件 需要在请求之前加一个校验文件内容格式请求

before-upload

 data(){
      return {
        ...
        //判断是否需要做文件检查
        checkFileFormat:false
      }
    },
    beforeUpload(rawFile) {
      this.loading = true;
      ...
      检查文件格式
      检查文件大小
      ...
      if (this.checkFileFormat) {
        return new Promise(async (resolve, reject) => {
          const fd = new FormData()
          fd.append('file', rawFile)
          const res = await checkRpAttFile(fd)
          this.loading = false;
          if (!res.success) {
            Message.error(res.message);
            reject()
          } else {
            resolve()
          }
        })
      } else {
        return true
      }
    },

到此这篇关于vue el-upload 上传文件格式校验的文章就介绍到这了,更多相关vue el-upload 上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue项目中Element UI组件未注册的问题原因及解决方法

    Vue项目中Element UI组件未注册的问题原因及解决方法

    在 Vue 项目中使用 Element UI 组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题的原因、解决方法,以及如何在需要时撤销相关操作,需要的朋友可以参考下
    2025-01-01
  • VUE预渲染及遇到的坑

    VUE预渲染及遇到的坑

    这篇文章主要介绍了VUE预渲染及遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue 路由间跳转和新开窗口的方式(query、params)

    Vue 路由间跳转和新开窗口的方式(query、params)

    这篇文章主要介绍了Vue 路由间跳转和新开窗口的方式,本文主要通过query方式和params方式介绍,需要的朋友可以参考下
    2019-12-12
  • vue利用指令实现快速设置元素的高度

    vue利用指令实现快速设置元素的高度

    在项目中经常有需要将列表的高度设置成剩余可视区域的高度,本文主要来和大家介绍一下如何通过指令和css变量的方式快速设置列表高度,希望对大家有所帮助
    2024-03-03
  • vue中el-upload上传图片到七牛的示例代码

    vue中el-upload上传图片到七牛的示例代码

    这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单,需要从后台获取七牛token上传图片到七牛,具体示例代码大家跟随小编一起学习吧
    2018-10-10
  • vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)

    vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)

    这篇文章主要介绍了vue3使用vis绘制甘特图制作timeline可拖动时间轴,时间轴中文化,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    vue项目中我们可以通过行内样式进行动态修改样式,下面这篇文章主要给大家介绍了关于vue中如何使用定义好的变量设置css样式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 详解Element-UI中上传的文件前端处理

    详解Element-UI中上传的文件前端处理

    这篇文章主要介绍了详解Element-UI中上传的文件前端处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue单向数据绑定和双向数据绑定方式

    vue单向数据绑定和双向数据绑定方式

    这篇文章主要介绍了vue单向数据绑定和双向数据绑定方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue中 Vue.prototype使用详解

    Vue中 Vue.prototype使用详解

    本文将结合实例代码,介绍Vue中 Vue.prototype使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07

最新评论