要求：1、文件与表单一起提交

           2、需要验证文件类型：文件必须为word，excel，txt等文本类型

 

本文主要是解决文件与表单一起上传时，需要验证文件类型，如何验证文件类型。如何将表单其它项与文件一起提交保存暂不做说明。

 

看了官方得文档 使用钩子函数:before-upload="beforeAvatarUpload"

 

 beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }

 

但是这种仅仅适合 文件单独提交或者文件自动上传（:auto-upload="true"）的情况。当return false时，会阻止文件上传。但是我项目的需求是 表单其它内容与文件一起提交，这时候当点击提交按钮时，才会调用钩子函数beforeAvatarUpload，阻止上传，不太友好。需要选择文件的时候，就阻止用户上传不符合类型的文件。所以我用了 钩子函数:on-change="changeUpload"，当用户选择文件的时候就开始验证文件的类型，如果文件类型不匹配直接阻止用户上传。

 

部分代码如下：
 

  changeUpload(file, fileList) {



            fileList.forEach((item1, index1) => {



                var fileType = item1.name.substring(item1.name.lastIndexOf('.') + 1)

                const extension1 = fileType === 'xls'

                const extension2 = fileType === 'xlsx'

                const extension3 = fileType === 'doc'

                const extension4 = fileType === 'docx'

                const extension5 = fileType === 'txt'



                if (!extension1 && !extension2 && !extension3 && !extension4 && !extension5) {

                    this.$message.error('上传文件只能是 excel、word、txt格式!');



//获取上传的文件

                    let fileArr = this.$refs.upload.uploadFiles;



                    fileArr.forEach((item, index) => {

//这里是防止编辑的时候，删除已经存在的文件（我用多余的属性 id，kind来区分是新上传的文件，还是编辑的时候已经存在的文件）

                        if (!item.id && !item.kind) {

                            if (item.name == item1.name) {

                                fileArr.splice(index, 1)//如果格式不对的文件，直接强制移除



                            }

                        }

                    })



                }



            });



        }

 

初次接触elementUI+vue，懂得比较少，总觉得这个方法很笨，但是没有找到更好的办法，如果哪位高人有更好的办法，望指点。