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

vue upload组件

选中多个文件上传
通过axios请求 onUploadProgress方法监听
on-progress on-success用这两个钩子函数实现进度条 下面有对应的函数。
本文是每个文件一个请求上传
也可以用一个请求上传多个文件，需要将文件遍历添加到form表单中，后端用 request.getParts(); 获取集合，有需要的可以改造一下。

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

<template>

  <div>
    <!-- multiple 允许上传多个文件 -->
    <el-upload
        :disabled="defaultDisabled"
        ref="upload"
        :multiple="multiFile"
        action=""
        :auto-upload="false"
        :file-list = "fileList"
        :http-request="uploadFile"
        :on-change="changeFileLength"
        :on-progress="uploadFileProcess"
        :on-success="handleFileSuccess"
        :on-preview = "handleFilePreview"
        :on-remove = "handleFileRemove"
        :before-upload = "beforeFileUpload"
        :before-remove = "beforeFileRemove"
        :limit="limit"
        :on-exceed = "handleFileExceed">
      <div v-if="!defaultDisabled">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click.stop="upload">上传到服务器</el-button>
      </div>
      <div slot="tip" class="el-upload__tip">文件大小不能超过1GB</div>
    </el-upload>
  </div>

</template>

<script>
module.exports = {
  name: "upload",
  props:{
    data:{
      type:Array,
      default:[],
    },
    businessId:{
      type:String,
      default:"",
    },
    businessType:{
      type:String,
      default:"",
    },
    filePath:{
      type:String,
      required:true, //必须指定路径
      default:"",
    },
    fileSize:{
      type:Number,
      default:(1024 * 1024 * 1024) // 默认1GB
    },
    fileNumber:{
      type:Number,
      default: 5 //默认5个文件
    },
    disabled:{
      type:Boolean,
      default:false,
    },
    multiple:{
      type:Boolean,
      default:true,
    }

  },

  data(){
    return {
      fileList: this.data, // 文件列表
      size:this.fileSize,// 文件大小限制
      limit:this.fileNumber, // 文件数量
      path:this.filePath, // 上传路径
      defaultDisabled: this.disabled, // 是否禁用
      formId: this.businessId, //业务主键
      formTable: this.businessType, //业务表
      multiFile:this.multiple //默认上传多个文件
    }
  },

  created(){
    this.getFileList();
  },
  methods:{

    //文件上传前调用，如果返回false 和 失败状态 就会停止上传 并移除fileList的文件
    beforeFileUpload(file) {
      //校验文件大小
      if (file.size >= this.size) {
        //单位GB
        let gb = (file.size / this.size).toFixed(4);
        this.$notify.error({
          title: '错误',
          message:  `${file.name} 文件大小超出${gb}GB，请重新选择！`
        });
        return false;
      }
    },
    // 将文件名称进行编码 后台进行解码
    changeFileLength(file, fileList){
      let fileName = encodeURI(file.name) // 如果可以上传多个文件，这里需要用fileList.forEach()处理
      let newFile = new File([file.raw],fileName);
      newFile.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
      file.raw = newFile;  // 替换file的数据
    },

    // 用户点击上传调用
    async upload(){
      // 触发上传 调用配置 :http-request="uploadFile"
      // 即触发 uploadFile函数
      await this.$refs.upload.submit();
      // 上传完成后执行的操作 ...
    },
    // 该函数调用多次
    // 每次param参数传入一个文件
    uploadFile(param){
      // 创建FormData上传
      let form = new FormData();
      form.append('file', param.file)
      form.enctype = "multipart/form-data";
      // 将附加信息添加至FormData
      form.append("filePath", this.path);
      form.append("businessId", this.formId);
      form.append("businessType", this.formTable);
        //上传操作
      this.uploadAttach(form,param).then(res => {
          /*上传成功处理*/
          param.onSuccess(res);
      }).catch(err => {
          /*报错处理*/
          this.$message.error(param.file.name + "上传错误");
          param.onSuccess(err);
          for (let i = 0; i < this.fileList.length; i++) {
            if (param.file.name === this.fileList[i].name) {
              this.fileList.splice(i, 1);
              break;
            }
          }
        });
      // }
    },
    // 上传文件
    uploadAttach(data,fileObject){
      return axios({
        method:'post',
        headers: {"Content-Type": "multipart/form-data"},
        url:"/servlet/uploadServlet",//自定义上传url
        data:data,
        onUploadProgress: progressEvent => {
          fileObject.progressFlag = true;
          fileObject.successFlag = true;
          let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
          fileObject.onProgress({percent});//调用uploader的进度回调
        }
      })
    },
    // 文件上传过程中的函数（在这里获取进度条的进度）
    uploadFileProcess(event, file, fileList) {
      this.fileList = fileList;
      for (let i = 0; i < this.fileList.length; i++) {
        if(file.name === this.fileList[i].name){
          this.fileList[i].progressFlag = true;
          this.fileList[i].successFlag = false;
          if(event.percent != 100){
            this.fileList[i].progressPercent = event.percent;
          }
          break;
        }
      }
    },
    // 文件上传成功的函数（用于文件上传成功之后的逻辑处理）
    handleFileSuccess(res,file,fileList){
      this.fileList = fileList;
      for (let i = 0; i < this.fileList.length; i++) {
        if(file.name === this.fileList[i].name){
          this.fileList[i].progressFlag = true;
          if(file.status == 'success' && res.data.code == 200){
            this.fileList[i].successFlag = true;
            res.data = res.data.data;
          }else{
            this.fileList[i].successFlag = false;
            this.fileList.splice(i, 1);
          }
          break;
        }
      }
    },
    //查看文件
    handleFilePreview(file){
      console.log(file);
    },
    //删除文件
    handleFileRemove(file,fileList){
      console.log(file);
    },
    //文件数超出函数
    handleFileExceed(files,fileList){
      this.$notify.error({
        title: '错误',
        message:  `只能选择${this.limit}个文件，请重新选择文件！`
      });
    },
    //文件删除前的操作
    beforeFileRemove(file, fileList){},
    // 后台获取已经上传的文件列表
    getFileList(){
      if(this.businessId === "") return;
      axios.get("/servlet/uploadServlet",{
        businessId:this.businessId,
      }).then(res => {
        if(res.data.code === 200) this.fileList = res.data.data
      }).catch(err=>{
        this.$message.error("请求失败,请稍后再试!");
      })
    },
  }
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226

java servlet请求

• @MultipartConfig 使用这个注解后 用下面方式获取文件
• Part part = request.getPart("file") 获取的是单文件
• Collection<Part> 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<String, String> 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();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

效果

文件比较大