Vue+ElementUI+Axios实现携带参数的文件上传（数据校验+进度条）

可以实现对上传文件的类型，大小进行数据校验，以及对上传文件所要携带的数据也进行的校验，也有文件上传进度的进度条。

一、Vue 结构部分

弹窗显示（文件上传框+文本框+单选按钮）

    
    
      
      
            
        
          
            
            
                  
                 将文件拖到此处，或点击选择文件
                 
          

          
          
            
          
          
          
            
              
              
            
          
        
       
      
      
      

      
        
          取 消
          
    确 定

二、JS部分

1、数据和数据校验部分

  
export default {
    name:"ResourceAdd",
    //组件是否显示（父组件传过来的）
    props: {
      isShowAdd: {
        type: Boolean,
        default: false
      },
  
    },
  
    data() {
  
      //数据校验
      var Type = (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('请选择壁纸类型'));
                  this.islose = true;
              } else {
                  this.islose = false
                  callback();
              }
          };
     //数据校验
      var Tag = (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('请添加标签'));
                  this.islose = true;
              } else if (value.length < 4) {
                  callback(new Error('最少输入4个字'));
                  this.islose = true;
              } else {
                  this.islose = false;
                  callback();
              }
          };
  
  
  
      return {
        resouceFileImg:null,
            loading:false,  //进度条是否隐藏
            percentage:0,   //进度条数值
            dialogVisible:false,  //是否上传完备
            //要上传文件的信息
        ResourceInfo: {
          "file":"",
          "tag":"",
          "type":""
        },
  
        //要校验的表单信息
        rules: { 
                  type: [
                      { validator: Type, trigger: 'blur'}
                  ],
                  tag: [
                  { validator: Tag, trigger: 'blur' }
                  ],
              },
      };
  
    },

2、方法部分

  export default {
    methods: {
          submitFileInfo(resourceInfo){
            //调用文件类型判断方法，检查上传文件类型是否合法（返回Boolean类型）
           let fileTypeCheck=this.fileTypeCheck(resourceInfo.file)
          //  判断文件是否合法
           if(fileTypeCheck){
           //文件通过校验，校验其它要上传里其它参数是否合法
           this.$refs.ResourceInfo.validate((valid) => {
            if(valid){
              //如果都合法
            // 直接通过new来创建FormData对象，用来装文件对象和其它参数（）
           let UpResourceInfo = new FormData();
           //通过append将数据添加到FormData中（数据是键值对类型）
           //注意：键要和后端接收的参数列表一一对应。
            UpResourceInfo.append('file', resourceInfo.file);
            UpResourceInfo.append("email",window.sessionStorage.getItem("Account"));
            UpResourceInfo.append("tag",resourceInfo.tag);
            UpResourceInfo.append("type",resourceInfo.type);

            //计算过上传进度
            // 进度条的实现主要依靠axios中提供的onUploadProgress函数
            //该函数提供了文件已上传部分的大小progressEvent.loaded和文件总大小progressEvent.total，利用这两个数据我们就可以计算出已经上传文件的进度。
            let config = {
              onUploadProgress: progressEvent => {
                //progressEvent.loaded:已上传文件大小
                //progressEvent.total:被上传文件的总大小
                let complete = (progressEvent.loaded / progressEvent.total ).toFixed(2) * 100 ;
                this.percentage = complete;   //上传进度
                if (this.percentage >= 100){
                  this.dialogVisible = true  //上传完毕
                }
               } 
              };

            //显示进度条
            this.loading = true;
            //通过axios对后端接口发起请求，并将上面的FormData对象参数发送过去，已经。
            axios.post("http://localhost:8888/resources/uploadResource",UpResourceInfo,config)
              .then((res)=>{
                if(res.data.flag==true){ 
                  //清空表单信息
                  this.ResourceInfo={
                            "file":"",
                           "tag":"",
                           "type":""
                           }
                    //清除上传文件列表
                  this.$refs.upload.clearFiles();
                  this.loading=false; //隐藏进度条
                  this.$message.success("添加成功！")
                 //调用父组件的方法隐藏弹窗
                 // this.$parent.AddSuccessColse(); 
                }
              })
              .catch((err)=>{
                this.$message.error(err)
                //清空表单信息
                this.ResourceInfo={};
                    //清除上传文件列表
                  this.$refs.upload.clearFiles();
                 //调用父组件的方法隐藏弹窗
                 //this.$parent.AddSuccessColse(); 
              })
            }
           });}
          },

          // 文件类型、大小数据校验
          fileTypeCheck(file) {
              const isJPG = file.type === 'image/jpg';
              const isJPEG = file.type === 'image/jpeg';
              const isPNG = file.type === 'image/png';
              const isMP4 = file.type === 'video/mp4';
              const isLt30M = file.size / 1024 / 1024 < 30;
              if (!isJPG && !isJPEG && !isPNG && !isMP4) {
                  this.$message.error('请上传 JPG、PNG、MP4格式文件!');
              } else 
              if (!isLt30M) {
                  this.$message.error('大小不能超过 30MB!');
              }
              return (isJPG || isPNG || isMP4 || isJPEG) && isLt30M;
          },

       //将上传的文件对象赋值到要上传的键值对中
       httprequest(param) {
        //将通过钩子函数函数，传过来的文件上传信息，中的文件赋值到要上传的键值对中
        this.ResourceInfo.file = param.file;
        },
  
       //取消时调用的方法
      quxiao() {
        this.$message.info("取消添加！");
        //清空表单信息
        this.ResourceInfo={
          "file":"",
          "tag": "",
          "type":""
        }
        this.$refs.upload.clearFiles();
        //通过调用父组件的方法来隐藏子组件（子组件无法修改父组件的值)
          this.$parent.AddQuXiaoColse();
      },
  
      //文件数量超过1个时自动调用的
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //是否删除文件列表中的文件（删除时自动调用）
      beforeRemove(file) {
        let isDel=this.$confirm(`确定移除 ${ file.name }？`);
        console.log(isDel)
        return isDel;
      }

    },
  }

三、后端代码（Springboot）

1、接口层方法（Controller）

 //资源上传接口
    @PostMapping("/uploadResource")
    public Result uploadResource(MultipartFile file,String email,String tag,String type){
        //生成UUID用来重新命名文件和做rid
        String uuid= UUID.randomUUID().toString().replaceAll("-","");
        Resource resource =new Resource();
        resource.setRid(uuid);
        resource.setEmail(email);
        resource.setTag(tag);
        resource.setType(type);
        return new Result(iResourceService.uploadResource(file,resource));
    }

2、服务层方法（Service）

//上传资源方法
    @Override
    public Boolean uploadResource(MultipartFile file, Resource resource) {

        if(!file.isEmpty()){
            String  fullName = file.getOriginalFilename();  //获取全文件名
            String type = fullName.substring(file.getOriginalFilename().lastIndexOf(".")); //获取文件后缀
            String fileName=resource.getRid()+type;  //拼接新文件名
            //获取上传目录路径
            ApplicationHome applicationHome=new ApplicationHome(this.getClass());
            String pre=applicationHome.getDir().getParentFile().getParentFile()+
                    "\\src\\main\\resources\\static\\wallpaper\\";
            //拼接上传路径
            String path=pre+fileName;
            try {
                //将文件上传到指定目录
                file.transferTo(new File(path));
                //将文件拼接成可访问的在线链接，并赋值到对象的setRUrl属性中
                resource.setRUrl("http://localhost:8888/static/wallpaper/"+fileName);
            }catch (IOException e){
                e.printStackTrace();
            }
        }
        //将图像信息插入到数据库中
        return resourceDao.insert(resource)==1;

    }

3、数据库数据

在这里插入图片描述

四、前端组件全部代码（ResourceAdd.vue）

效果图如下：

在这里插入图片描述

    
    
      
      
            
        
          
            
            
                  
                 将文件拖到此处，或点击选择文件
                 
          

          
          
            
          
          
          
            
              
              
            
          
        
       
      
      
      

      
        
          取 消
          
          确 定
        
      
    
  

  
  export default {
    name:"ResourceAdd",
    //组件是否显示（父组件传过来的）
    props: {
      isShowAdd: {
        type: Boolean,
        default: false
      },
  
    },
  
    data() {
  
      //数据校验
      var Type = (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('请选择壁纸类型'));
                  this.islose = true;
              } else {
                  this.islose = false
                  callback();
              }
          };
     //数据校验
      var Tag = (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('请添加标签'));
                  this.islose = true;
              } else if (value.length < 4) {
                  callback(new Error('最少输入4个字'));
                  this.islose = true;
              } else {
                  this.islose = false;
                  callback();
              }
          };
  
  
  
      return {
        resouceFileImg:null,
            loading:false,  //进度条是否隐藏
            percentage:0,   //进度条数值
            dialogVisible:false,  //是否上传完备
            //要上传文件的信息
        ResourceInfo: {
          "file":"",
          "tag":"",
          "type":""
        },
  
        //要校验的表单信息
        rules: { 
                  type: [
                      { validator: Type, trigger: 'blur'}
                  ],
                  tag: [
                  { validator: Tag, trigger: 'blur' }
                  ],
              },
      };
  
    },
    methods: {
          submitFileInfo(resourceInfo){
            //调用文件类型判断方法，检查上传文件类型是否合法（返回Boolean类型）
           let fileTypeCheck=this.fileTypeCheck(resourceInfo.file)
          //  判断文件是否合法
           if(fileTypeCheck){
           //文件通过校验，校验其它要上传里其它参数是否合法
           this.$refs.ResourceInfo.validate((valid) => {
            if(valid){
              //如果都合法
            // 直接通过new来创建FormData对象，用来装文件对象和其它参数（）
           let UpResourceInfo = new FormData();
           //通过append将数据添加到FormData中（数据是键值对类型）
           //注意：键要和后端接收的参数列表一一对应。
            UpResourceInfo.append('file', resourceInfo.file);
            UpResourceInfo.append("email",window.sessionStorage.getItem("Account"));
            UpResourceInfo.append("tag",resourceInfo.tag);
            UpResourceInfo.append("type",resourceInfo.type);

            //计算过上传进度
            // 进度条的实现主要依靠axios中提供的onUploadProgress函数
            //该函数提供了文件已上传部分的大小progressEvent.loaded和文件总大小progressEvent.total，利用这两个数据我们就可以计算出已经上传文件的进度。
            let config = {
              onUploadProgress: progressEvent => {
                //progressEvent.loaded:已上传文件大小
                //progressEvent.total:被上传文件的总大小
                let complete = (progressEvent.loaded / progressEvent.total ).toFixed(2) * 100 ;
                this.percentage = complete;   //上传进度
                if (this.percentage >= 100){
                  this.dialogVisible = true  //上传完毕
                }
               } 
              };

            //显示进度条
            this.loading = true;
            //通过axios对后端接口发起请求，并将上面的FormData对象参数发送过去，已经。
            axios.post("http://localhost:8888/resources/uploadResource",UpResourceInfo,config)
              .then((res)=>{
                if(res.data.flag==true){ 
                  //清空表单信息
                  this.ResourceInfo={
                            "file":"",
                           "tag":"",
                           "type":""
                           }
                    //清除上传文件列表
                  this.$refs.upload.clearFiles();
                  this.loading=false; //隐藏进度条
                  this.$message.success("添加成功！")
                 //调用父组件的方法隐藏弹窗
                 // this.$parent.AddSuccessColse(); 
                }
              })
              .catch((err)=>{
                this.$message.error(err)
                //清空表单信息
                this.ResourceInfo={};
                    //清除上传文件列表
                  this.$refs.upload.clearFiles();
                 //调用父组件的方法隐藏弹窗
                 //this.$parent.AddSuccessColse(); 
              })
            }
           });}
          },

          // 文件类型、大小数据校验
          fileTypeCheck(file) {
              const isJPG = file.type === 'image/jpg';
              const isJPEG = file.type === 'image/jpeg';
              const isPNG = file.type === 'image/png';
              const isMP4 = file.type === 'video/mp4';
              const isLt30M = file.size / 1024 / 1024 < 30;
              if (!isJPG && !isJPEG && !isPNG && !isMP4) {
                  this.$message.error('请上传 JPG、PNG、MP4格式文件!');
              } else 
              if (!isLt30M) {
                  this.$message.error('大小不能超过 30MB!');
              }
              return (isJPG || isPNG || isMP4 || isJPEG) && isLt30M;
          },

       //将上传的文件对象赋值到要上传的键值对中
       httprequest(param) {
        //将通过钩子函数函数，传过来的文件上传信息，中的文件赋值到要上传的键值对中
        this.ResourceInfo.file = param.file;
        },
  
       //取消时调用的方法
      quxiao() {
        this.$message.info("取消添加！");
        //清空表单信息
        this.ResourceInfo={
          "file":"",
          "tag": "",
          "type":""
        }
        this.$refs.upload.clearFiles();
        //通过调用父组件的方法来隐藏子组件（子组件无法修改父组件的值)
          this.$parent.AddQuXiaoColse();
      },
  
      //文件数量超过1个时自动调用的
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //是否删除文件列表中的文件（删除时自动调用）
      beforeRemove(file) {
        let isDel=this.$confirm(`确定移除 ${ file.name }？`);
        console.log(isDel)
        return isDel;
      }

    },
  }