实现异步文件上传功能！

code/java/car_dealer/pom.xml

@@ -63,6 +63,19 @@
       <version>2.13.4</version>
     </dependency>
 
+    <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
+    <dependency>
+      <groupId>commons-io</groupId>
+      <artifactId>commons-io</artifactId>
+      <version>2.11.0</version>
+    </dependency>
+    <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
+    <dependency>
+      <groupId>commons-fileupload</groupId>
+      <artifactId>commons-fileupload</artifactId>
+      <version>1.4</version>
+    </dependency>
+
   </dependencies>
 
   <build>

code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/fileupload/FileUploadController.java

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-09-28 15:47:02
  * @LastEditors: Kane
- * @LastEditTime: 2022-09-29 00:14:00
+ * @LastEditTime: 2022-09-30 00:33:41
  * @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\fileupload\FileUploadController.java
  * @Description: 
  * 
@@ -11,6 +11,7 @@
 
 package com.cpic.xim.car_dealer.controllers.fileupload;
 
+import java.io.File;
 import java.io.IOException;
 import java.nio.channels.IllegalSelectorException;
 import javax.servlet.ServletException;
@@ -18,6 +19,7 @@ import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import org.springframework.context.annotation.Scope;
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.multipart.MultipartFile;
@@ -37,30 +39,64 @@ public class FileUploadController
     /*****************************************************
      * @param request
      * @param response
-     * @param file
+     * @param uploadFile
      * @return FileUploadResult 
      *****************************************************/
     @RequestMapping( path = "/upload" )
     @ResponseBody
-    public FileUploadResult uploadFile( HttpServletRequest request, HttpServletResponse response,
-            MultipartFile file ) throws IllegalSelectorException, IOException
+    @CrossOrigin
+    public FileUploadResult uploadFile( HttpServletRequest request, MultipartFile uploadFile,
+            String test ) throws IllegalSelectorException, IOException
     {
-        response.setContentType( "text/json;charset=UTF-8" );
+        // response.setContentType( "text/json;charset=UTF-8" );
+        // response.setHeader( "Access-Control-Allow-Origin", "*" );
+        // response.setHeader( "Access-Control-Allow-Methods", "GET,POST" );
 
         FileUploadResult result = new FileUploadResult();
-        // PrintWriter writer = response.getWriter();
-        // String sessionID = request.getSession().getId();
+        String sessionID = request.getSession().getId();
 
-        if ( file == null)
+        if ( uploadFile == null )
         {
             result.setSuccess( false );
+            result.setMessage( "请用于上传文件！" );
+
+            return result;
         }
-        else
+
+        if ( uploadFile.isEmpty() )
         {
-            result.setSuccess( true );
-            result.setFilePath( file.getOriginalFilename() );
+            result.setSuccess( false );
+            result.setMessage( "上传空文件！" );
+
+            return result;
         }
 
+        // 使用sessionID来作为存放的目录
+        String rootPath = request.getServletContext().getRealPath( "/" + sessionID );
+        String fileName = uploadFile.getOriginalFilename();
+
+        File destFile = new File( rootPath, fileName );
+
+        // 判断路径是否存在，不存在就创建。
+        if ( !destFile.getParentFile().exists() )
+        {
+            // 创建路径
+            if ( !destFile.getParentFile().mkdirs() )
+            {
+                // 如果创建路径失败
+                result.setSuccess( false );
+                result.setMessage( "创建存放路径失败，请联系开发人员！" );
+
+                return result;
+            }
+        }
+
+        uploadFile.transferTo( destFile );
+
+        result.setSuccess( true );
+        result.setFilePath( destFile.getPath() );
+        result.setMessage( "上传成功！" );
+
         return result;
     }
 }

code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/fileupload/FileUploadResult.java

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-09-28 23:43:42
  * @LastEditors: Kane
- * @LastEditTime: 2022-09-29 00:16:20
+ * @LastEditTime: 2022-09-29 22:29:13
  * @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\fileupload\FileUploadResult.java
  * @Description: 
  * 
@@ -24,6 +24,9 @@ public class FileUploadResult
     @JsonProperty( "file_path" )
     private String filePath;
 
+    @JsonProperty( "message" )
+    private String message;
+
     public FileUploadResult()
     {}
 
@@ -45,5 +48,15 @@ public class FileUploadResult
     public void setFilePath( String filePath )
     {
         this.filePath = filePath;
-    };
+    }
+
+    public String getMessage()
+    {
+        return message;
+    }
+
+    public void setMessage( String message )
+    {
+        this.message = message;
+    }
 }

code/java/car_dealer/src/main/webapp/WEB-INF/classes/spring.xml

@@ -18,4 +18,9 @@
         <property name="suffix" value=".jsp" />
     </bean> -->
 
+    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
+        <!-- <property name="defaultEncoding" value="UTF-8" /> -->
+        <property name="maxUploadSize" value="5000000" />
+    </bean>
+
 </beans>

code/java/car_dealer/src/main/webapp/file_upload.html

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-09-29 16:33:30
  * @LastEditors: Kane
- * @LastEditTime: 2022-09-29 16:47:19
+ * @LastEditTime: 2022-09-30 00:33:12
  * @FilePath: \car_dealer\src\main\webapp\file_upload.html
  * @Description: 
  * 
@@ -21,28 +21,71 @@
     </head>
     <body>
         <div id="app">
-            <form enctype="multipart/form-data">
+            <form
+                action="http://localhost:8080/cardealer/upload"
+                id="uploadform"
+                enctype="multipart/form-data"
+                method="post"
+            >
                 <input
                     type="file"
-                    name="upload"
+                    name="uploadFile"
                     id="upload"
                     style="display: none"
                     onchange="fileUploadChange()"
                 />
                 <input
                     type="text"
-                    id="upload_text"
-                    readonly
-                    onclick="upload.click()"
+                    value="12345"
+                    name="test"
+                    style="display: none"
                 />
             </form>
-            <button>上传</button>
+            <input
+                type="text"
+                id="upload_text"
+                readonly
+                onclick="upload.click()"
+            />
+            <button id="btnUpload">上传</button>
         </div>
     </body>
     <script>
+        const reqeustURL = "http://localhost:8080/cardealer/upload";
+        const btnUpload = document.getElementById("btnUpload");
+
         function fileUploadChange() {
             document.getElementById("upload_text").value =
                 document.getElementById("upload").value;
         }
+
+        btnUpload.onclick = function (event) {
+            const uploadForm = document.getElementById("uploadform");
+            const form = new FormData(uploadForm);
+
+            //form.append("myfile", file);
+
+            const xhr = new XMLHttpRequest();
+
+            xhr.upload.onprogress = function (event) {
+                if (event.lengthComputable) {
+                    let percent = Math.round(
+                        (event.loaded * 100) / event.total,
+                    );
+
+                    console.log("上传进度:" + percent);
+                }
+            };
+
+            xhr.onload = function (event) {
+                //let result = JSON.parse(xhr.responseText);
+
+                console.log(xhr.responseText);
+                //console.log(result);
+            };
+
+            xhr.open("post", reqeustURL, true);
+            xhr.send(form);
+        };
     </script>
 </html>