vue +element的上传文件限制文件大小和限制文件类型

element的文件上传的文档中介绍：

参数	说明	类型
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string

下面附上代码

	<el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="onchange"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeRemove"
            accept=".rar,.zip,.doc,.docx,.pdf"
            multiple
            :limit="3"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">选择附件</el-button>
            <div slot="tip" class="el-upload__tip">
              支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
            </div>
          </el-upload>

实际效果

说明

这里只设置一个accept 是不可行的，用户还可可以选择所有文件进行上传。

这里可以用on-change进行添加文件的时候进行附加判断，

fileList是上传文件的集合，判断上传文件的file对象的name和size属性判断新添加文件的类型和大小。

代码

//html部分
	<el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="onchange"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeRemove"
            accept=".rar,.zip,.doc,.docx,.pdf"
            multiple
            :limit="3"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">选择附件</el-button>
            <div slot="tip" class="el-upload__tip">
              支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
            </div>
          </el-upload>

//js部分
	  onchange(file,fileList) {
      let fileName = file.name;
      let uid = file.uid
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      if (
        lastName.toLowerCase() !== ".zip" &&
        lastName.toLowerCase() !== ".rar"&&
        lastName.toLowerCase() !== ".docx"&&
        lastName.toLowerCase() !== ".pdf"
      ) {
        this.$message.error("文件必须为.rar .zip .doc .docx .pdf 类型");
        // this.resetCompressData()
        for(var i = 0;i<fileList.length;i++) {
          if(fileList[i].uid == uid) {
            fileList.splice(i,1)
          }
        }
        return;
      }
      // 限制上传文件的大小
      const isLt =
        file.size / 1024 / 5 >= 1 && file.size / 1024 / 1024 / 20 <= 1;
      if (!isLt) {
        this.$message.error("上传文件大小不得小于5KB,不得大于20MB!");
        for(var i = 0;i<fileList.length;i++) {
          if(fileList[i].uid == uid) {
            fileList.splice(i,1)
          }
        }
      }
      return isLt;
    },

此时，上传限制类型和限制大小的上传功能完成

结果展示