Vue项目使用element中upload组件的http-request自定义上传文件问题及限制文件类型

在修改项目的时候，发现之前项目是对文件类型限制jpeg、jpg、png、docx、mp4、ppt、pdf，结果没有限制住类型，上传webp图片时也可以进行上传。然后在修改的过程中发现，因为我添加了before-remove移除之前钩子函数，然后添加上传之前对文件类型校验时候，若符合就上传成功，否则移除d框d出进行删除，目前我去掉了二次确认删除d框，参考代码：

<el-upload
   class="upload-file"
   action
   :before-upload="beforeUpload"
   :before-remove="beforeRemove"
   :http-request="selectPicUpload"
   :file-list="fileList"
   accept=".jpg,.png,jpeg,.pdf,.ppt,.mp4"
 >
   <el-button
     size="small"
     type="primary"
     icon="el-icon-upload2"
     class="upload-file-btn"
     >点击上传</el-button
   >
   <div slot="tip" class="el-upload__tip">
     （可上传jpg/png/pdf/ppt/doc/docx/mp4文件,
     &nbsp;上传文件需小于500M）
   </div>
 </el-upload>
 
**dat中定义fileList**
data() {
	return{
		fileList: []
	}
}

**methods方法中添加以下方法**
beforeUpload(file) {
   const isExcel =
     file.name.split(".")[1] === "jpg" ||
     file.name.split(".")[1] === "jpeg" ||
     file.name.split(".")[1] === "png" ||
     file.name.split(".")[1] === "docx" ||
     file.name.split(".")[1] === "pdf" ||
     file.name.split(".")[1] === "ppt" ||
     file.name.split(".")[1] === "mp4";
     const isSize = file.size / 1024 / 1024 < 1;
   if (!isExcel) {
     this.$message({
       message: "只能上传jpg、png、jpeg、docx、pdf、ppt、mp4文件",
       type: "error",
     });
   }
   if (!isSize) {
        this.$message({
          message: "上传文件大小不能超过 1MB!",
          type: "error"
        });
      }
   return isExcel && isSize;;
 },

handleRemove(file, fileList) {
   this.fileList = fileList;
   this.relaseForm.uploadCourse = "";
 },

// 上传课件
    selectPicUpload(obj) {
      let fd = new FormData(); //参数的格式是formData格式的
      fd.append("file", obj.file); //参数
      fd.append("path", "train");
      this.$axios.post("xxxxxx", fd).then((res) => {
        if (res.code == 0) {
          console.log();
          this.fileStr.push(res.data.file_name);
          this.relaseForm.uploadCourse = this.fileStr.join();
        } else {
          this.$message(res.msg);
        }
      });
    },

以上就是http-request自定义上传文件的方法，目前二次确认d框删除和文件类型一起使用在看中，目前思路就是手写一个d框，然后移除需要删除的文件，后边有更好的解决办法，后边会及时更新。