vue upload组件

选中多个文件上传

通过axios请求 onUploadProgress方法监听

on-progress on-success用这两个钩子函数实现进度条 下面有对应的函数。

本文是每个文件一个请求上传

也可以用一个请求上传多个文件，需要将文件遍历添加到form表单中，后端用 request.getParts(); 获取集合，有需要的可以改造一下。

官网地址：https://element.eleme.cn/#/zh-CN/

java servlet请求

• @MultipartConfig 使用这个注解后 用下面方式获取文件
• Part part = request.getPart("file") 获取的是单文件
• Collection parts = request.getParts(); 获取的多文件

  package com.kaiyue.detection.upload;
  import com.App.Servlet.AppResponse;
  import com.alibaba.fastjson.JSONObject;
  import com.kaiyue.common.BeanFactory;
  import com.kaiyue.common.resource.AppConfig;
  import com.kaiyue.common.util.DateUtil;
  import com.kaiyue.jpf.attachment.service.FileService;
  import com.kaiyue.jpf.common.resource.CommonResource;
  import javax.servlet.ServletException;
  import javax.servlet.annotation.MultipartConfig;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import javax.servlet.http.Part;
  import java.io.*;
  import java.net.URLDecoder;
  import java.util.Collection;
  import java.util.HashMap;
  import java.util.Random;
  @WebServlet(name = "uploadServlet", urlPatterns = "/servlet/uploadServlet")
  @MultipartConfig
  public class uploadServlet extends HttpServlet {
    @Override
    public void destroy() {
      super.destroy();
    }
    @Override
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
      this.doPost(request, response);
    }
    /**
     * @param request
     * @param response
     */
    @Override
    protected void doPost(HttpServletRequest request,
                          HttpServletResponse response) throws IOException, ServletException {
      request.setCharacterEncoding("utf-8");
      response.setCharacterEncoding("utf-8");
      response.setContentType("text/html;charset=utf-8");
      FileService fileService = (FileService) BeanFactory.getBeanByName("fileService");
      AppResponse res = new AppResponse();
      request.setCharacterEncoding("UTf-8");
      String businessId = request.getParameter("businessId");//业务主键
      String filePath = request.getParameter("filePath");//保存路径
      String businessType = request.getParameter("businessType");//业务表名
      HashMap returnMap = new HashMap<>();
      String fileId = "";//文件信息的主键
      try {
        //获取文件对象
        Part part = request.getPart("file");
        //获取请求头，请求头的格式：form-data; name="file"; filename="snmp4j--api.zip"
        String header = part.getHeader("content-disposition");
        String fileName = getFileName(header);
        fileName = URLDecoder.decode(fileName, "UTF-8");
  //获取配置的磁盘根目录
        String path = AppConfig.getRootPath();
        Random random = new Random();
        int number = random.nextInt(1000);
  //防止上传的文件重名 取一个新的名字
        String newFileName = fileName.substring(0, fileName.lastIndexOf(".")) + DateUtil.getTimeStampId() + number +
                fileName.substring(fileName.lastIndexOf("."));
        File dir = new File(path + CommonResource.FILE_SEPARATOR + filePath + CommonResource.FILE_SEPARATOR);
        if (!(dir.exists())) {
          dir.mkdirs();
        }
  //写入磁盘
        uploadFile(part, dir + CommonResource.FILE_SEPARATOR + newFileName);
        String projectId = "";
        String userId = "";
  //保存到数据库
        fileId = fileService.addFileRecord(fileName, filePath + CommonResource.FILE_SEPARATOR + newFileName, userId,
                businessType, businessId, projectId, part.getSize());
        returnMap.put("fileId", fileId);//主键
        returnMap.put("businessId", businessId);
        res.setData(returnMap);
        res.setCode(AppResponse.OK);
        res.setMessage("上传成功!");
      } catch (Exception e) {
        res.setData(returnMap);
        res.setCode(AppResponse.PARAMETER_ERR);
        res.setMessage("上传失败!");
        e.printStackTrace();
      }
      PrintWriter out = response.getWriter();
      out.println(JSONObject.toJSONString(res));
      out.flush();
      out.close();
    }
    /**
     * 根据请求头解析出文件名
     * 请求头的格式：火狐和google浏览器下：form-data; name="file"; filename="snmp4j--api.zip"
     * IE浏览器下：form-data; name="file"; filename="E:\snmp4j--api.zip"
     *
     * @param header 请求头
     * @return 文件名
     */
    public String getFileName(String header) {
      /**
       * String[] tempArr1 = header.split(";");代码执行完之后，在不同的浏览器下，tempArr1数组里面的内容稍有区别
       * 火狐或者google浏览器下：tempArr1={form-data,name="file",filename="snmp4j--api.zip"}
       * IE浏览器下：tempArr1={form-data,name="file",filename="E:\snmp4j--api.zip"}
       */
      header = header.substring(header.lastIndexOf("\\") + 1).replaceAll("\"", "");
      String[] tempArr1 = header.split(";");
      /**
       *火狐或者google浏览器下：tempArr2={filename,"snmp4j--api.zip"}
       *IE浏览器下：tempArr2={filename,"E:\snmp4j--api.zip"}
       */
      String[] tempArr2 = tempArr1[2].split("=");
      //获取文件名，兼容各种浏览器的写法
      String fileName = tempArr2[1].substring(tempArr2[1].lastIndexOf("\\") + 1).replaceAll("\"", "");
      return fileName;
    }
    private void uploadFile(Part part, String path)
            throws Exception {
      InputStream stream = null;
      OutputStream out = null;
      stream = part.getInputStream();
      out = new FileOutputStream(path);
      int bytesRead = 0;
      byte[] buffer = new byte[8192];
      while ((bytesRead = stream.read(buffer, 0, 8192)) != -1) {
        out.write(buffer, 0, bytesRead);
      }
      out.close();
      stream.close();
    }
  }
  

  效果

  文件比较大