vue + element 文件上传及校验

Posted treectj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue + element 文件上传及校验相关的知识,希望对你有一定的参考价值。

上传文件 后台需要 formate 进行上传,中间遇到一点小插曲 先贴大佬地址https://www.cnblogs.com/fmixue/p/9968910.html

发现 不用自己定义请求方式,和修改请求头里面的content-type:"multipart/form-data"
直接在action里写请求地址,element貌似默认是post请求,并且默认转为了FormData方式

技术图片

 

on-success 事件 

handleAvatarSuccess(res,file,fileList){
    res是请求回来的数据
    file是文件信息
    fileList是请求文件列表
}

文件上传验证
首先在el-form-item  绑定好prop="imgUpload" 并且 ref="xxx"  (ref用于上传成功文件后清除验证)
//前提form表单要绑定rules:data中  
rules:{
     imgUpload: [ { required:true, validator:validateFileUrl, trigger:["change"] } ] 
}

//定义校验规则
let validateFileUrl = (rule, value, callback) => {
   if(this.$refs.imgUpload){  //this.$refs.imgUpload 这个打印一下就知道要的判断条件
       callback(new Error("请上传文件"))
   }else{
       callback()
   }              
}

//上传成功后清除验证
this.$refs.xxx.clearValidate();

如果需要判断文件类型的话 可以在before-upload 这个方法上进行操作  只是对文件扩展名进行校验

handleBeforeUpload(file) {
      let extension = file.name.split(".")[1];
      let extensionList = ["xls", "xlsx"];
      if (extensionList.indexOf(extension) < 0) {
        this.$message.warning("只能上传Excel文件");
        return false;
      }
      console.log(file);
    },

 

 
 
 

  

 
 

 

以上是关于vue + element 文件上传及校验的主要内容,如果未能解决你的问题,请参考以下文章

elementUI+el-upload 上传文件大小与文件类型校验

vue+axios+element+ui实现手机发送验证码及校验验证码功能

Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的

Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例

element中upload上传文件遇到校验问题

Vue + Element(文件上传控件)+ SpringBoot 文件上传功能