<template>  
  <el-upload  
    ref="upload"  
    class="upload-demo"  
    action="http://localhost:9090/api/upload"  <!--這個為后端響應的路徑-->
    :on-success="handleSuccess"  
    :before-upload="beforeUpload"  
    :file-list="fileList"  
    :auto-upload="false"  
    :on-change="handleChange"  
  >  
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>  
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>  
    <div slot="tip" class="el-upload__tip">只能上傳xlsx/xls文件，且不超過500kb</div>  
  </el-upload>  
</template>  
  
<script>  
export default {  
  // ... 其他代碼保持不變  
  data() {  
    return {  
      fileList: []  
    };  
  },  
  methods: {  
    handleSuccess(response, file, fileList) {  
      console.log('文件上傳成功:', response);  
    },  
    beforeUpload(file) {  
      // 限制格式為excel
      // 如果不想限制可以將這行代碼去掉，以及后面的一些關于excel的判斷
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';  
      // 限制文件大小
      const isLt2M = file.size / 1024 / 1024 < 0.5;  

      if (!isExcel) {  
        this.$message.error('上傳文件只能是 xls/xlsx 格式!');  
      }  

      if (!isLt2M) {  
        this.$message.error('上傳文件大小不能超過 500KB!');  
      }  
      return isExcel && isLt2M;  
    },  
    submitUpload() {  
      // 這邊的$refs.upload要與上面第三行的ref一致
      this.$refs.upload.submit();  
    },  
    handleRemove(file, fileList) {  
      console.log('移除文件', file, fileList);  
    },  
    handleChange(file, fileList) {  
      this.fileList = fileList;  
    }  
  }    
};  
</script>

    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.8.0</version>
    </dependency>

@RequestMapping(value = "/upload")
    public void handleFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException{
        // 檢查請求是否為多部分請求
        if (!ServletFileUpload.isMultipartContent(request)) {
            throw new ServletException("Content type is not multipart/form-data");
        }

        // 配置上傳參數(shù)
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            // 解析請求的內(nèi)容提取文件數(shù)據(jù)
            List<FileItem> formItems = upload.parseRequest(request);

            if (formItems != null && formItems.size() > 0) {
                // 迭代表單數(shù)據(jù)
                for (FileItem item : formItems) {
                    // 處理不在表單中的字段
                    if (!item.isFormField()) {
                        String fileName = new File(item.getName()).getName();
                        //下面的路徑就是你要映射到target的路徑
                        String filePath = request.getServletContext().getRealPath("/") + "WEB-INF"+File.separator+"static" + File.separator + fileName;
                        File storeFile = new File(filePath);

                        // 在控制臺輸出文件的上傳路徑
                        System.out.println(filePath);
                        System.out.println("編碼前的原文: " + fileName);
                        //這一條在控制臺打印可能會出現(xiàn)字符編碼的問題，如浣撴浜哄憳淇℃伅.xlsx
                        //這種是gbk編碼，接下來就將gbk解碼為utf-8
                        byte[] gbkBytes = fileName.getBytes("gbk");
                        for (byte b : gbkBytes) {
                            System.out.print(Integer.toHexString(b & 0xff) + ",");
                        }
                        String gbkToUtf8 = new String(gbkBytes, "utf8");
                        System.out.println("gbk編碼，utf8解碼后的文字: " + gbkToUtf8 + "\n" + "----------------------");
                       

                        // 保存文件到硬盤
                        item.write(storeFile);
                        request.setAttribute("message", "文件上傳成功!");
                    }
                }
            }
        } catch (Exception ex) {
            request.setAttribute("message", "文件上傳失敗!");
        }
    }