前端vue elementUI upload上传组件封装&多文件上传&进度条，后端servlet request.getPart()接收文件信息

以下是一个使用Vue.js和Element UI进行文件多文件上传并显示进度条的简单示例。前端使用Element UI的<el-upload>组件，后端使用Servlet处理上传请求。

前端代码（Vue组件）:

<template>
  <el-upload
    class="upload-demo"
    drag
    :action="uploadUrl"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :file-list="fileList"
    list-type="text">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:8080/upload', // 后端上传接口URL
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      console.log('Preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      console.log('Success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.log('Error:', err, file, fileList);
    },
    handleProgress(event, file, fileList) {
      console.log('Progress:', event.percent, file, fileList);
    }
  }
};
</script>

后端代码（Servlet）:

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
 
public class UploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 检查是否有文件上传
        if (ServletFileUpload.isMultipartContent(request)) {
            try {
                // 配置上传设置
                DiskFileItemFactory factory = new DiskFileItemFactory();
                ServletFileUpload upload = new ServletFileUpload(factory);
                
                // 解析请求
                List<FileItem> items = upload.parseRequest(request);
                for (FileItem item : items) {