vue 文件上传自定义实现

vue的文件上传组件 upload ,拥有支持多种格式文件上传，单文件多文件等都支持，许多项目现在都少不了文件上传功能，但是vue 的upload组件如果直接引用，肯定也有一些不方便之处，有的时候需要传参数，需要手动触发上传方法，而不是选择了文件就上传，所以结合我项目实例，写一vue 自定义文件上传的实现，包括前端和后台的处理以及参数的接收。

一、先认识一下vue 的upload组件，官网链接 http://element-cn.eleme.io/#/zh-CN/component/upload，这里不多做解释，大家自己看

二、使用

   这个组件有多种样式，我在这里只展示一种，如图所示

代码：

 

由于我这个是做的一个公共组件，可以作为其他页面的一个组件给放进去，所以会有一些特别之处，，大部分在代码中都有注释。

 

三、父页面部分代码

   在需要的地方引用这句话，

 

import InportExcel from '@/api/pfm/common/InportExcel';   //引入InportExcel

 

watch:{

headerId:function(val,oldval){

if(val && val != -1){

this.fileData={};          //参数监听

this.fileData.currentHeaderId=val; //参数赋值

this.urlString=" http://localhost:8080/pfm/file/upFile"; //url赋值

 

}

}

 

components:{      //InportExcel注册

InportExcel:InportExcel

}

 

 

四、后台代码处理

1、controller

@PostMapping("/upFile")
public Object upLoadFile(@RequestParam("file") MultipartFile file,@RequestParam("params") String params,
                         HttpServletResponse response,HttpServletRequest request){
   Workbook workbook=null;
    try{
       if(params!=null){
          JSONObject json=JSONObject.parseObject(params);
          if(json.containsKey("currentHeaderId")){
             System.out.println(json.get("currentHeaderId").toString());
          }
       }
       workbook= fileService.uploadFile(file,request,response);
    }catch (Exception e){
       logger.info(e.getMessage());
    }
    return workbook;
}

 2、service实现

@Override
public Workbook uploadFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {
   checkFile(file);
   System.out.println(file);
   return getWorkBook(file);
   //接收文件

}
public static void checkFile(MultipartFile file) throws IOException {
   if(null==file){
      logger.info("文件不存在");
      throw new FileNotFoundException("文件不存在");
   }
   String fileName=file.getOriginalFilename();
   System.out.println(fileName.endsWith("xls"));
   if(!fileName.endsWith("xls")&&!fileName.endsWith("xlsx")){
      logger.info("不是excel文件");
      throw new IOException(fileName+"不是excel文件");
   }
}
public static Workbook getWorkBook(MultipartFile file){
   String fileName=file.getOriginalFilename();
   Workbook workbook=null;
   try{
      InputStream is=file.getInputStream();
      if(fileName.endsWith("xls")){
         workbook=new HSSFWorkbook(is);
      }else if(fileName.endsWith("xlsx")){
         workbook=new XSSFWorkbook(is);

      }
   }catch (IOException e){
      logger.info(e.getMessage());
   }
   return workbook;
}

3、注，本次后台代码只针对excel文件，如果是其他文件，也可以进行百度，处理方法很简单

转载于:https://www.cnblogs.com/szy-wang/p/10475130.html