element-ui的el-upload如何判断上传文件的类型？

element-ui的el-upload如何判断上传文件的类型？<template><div><el-uploadclass="upload-demo":before-upload = "checkFileType"dragaction="https://jsonplaceholder.typicode.com/posts/"multiple><i cla

ych!

8293人浏览 · 2021-01-25 19:20:09

ych! · 2021-01-25 19:20:09 发布

element-ui的el-upload如何判断上传文件的类型？

在这里插入图片描述


<template>
  <div>
   <el-upload
    class="upload-demo"
    :before-upload = "checkFileType"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
  </div>
</template>

解决：使用before-upload

// before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

在这里插入图片描述

我们打印一下before-upload的参数file

·console.log(‘file:’,file);

在这里插入图片描述

判断文件类型根据 file.name，再进行字符串切割，判断后缀即可

下面以检查文件是否为.jpg为例：

export default {
  name: 'HelloWorld',
  data () {
  },
  methods: {
    checkFileType(file){
    	// 以检查文件是否为.jpg为例
    	const fileName = file.name;
    	const fileType = fileName.substring(fileName.lastIndexOf('.'));
    	if(fileType === '.jpg'){
      	console.log('是.jpg文件');
    	}else{
      	console.log('不是.jpg文件');
    	}
    }
  },
}