JavaWeb簡單檔案上傳流程的實戰記錄

2022-03-31 13:02:32

引言

這裡實現一個簡單的圖片上傳功能，主要是熟悉這個檔案上傳的互動流程。關於更復雜的檔案上傳，如大檔案的切片上傳、斷點續傳等，這裡不做過多介紹。

前端上傳檔案

首先在前端建立一個頁面，這裡我們選擇通過form表單的形式上傳檔案。在選擇時，使用input標籤中的file型別就可以自動的選擇本地檔案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上傳一張圖片</title>
</head>
<body>
<form action="upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="MyImage">
    <input type="submit" value="提交圖片">
</form>
</body>
</html>

程式碼解釋：

在form標籤中，action屬性後寫入表單資料上傳的URL地址，如果不寫，預設上傳到當前頁面，這裡我們寫成伺服器解析的地址@WebServlet("/upload")。
method屬性中我們設為POST方法，即提交表單資料的方法，也就是前面我們說的構造HTTP請求的方法，並且POST傳輸的資料量大，可視為不受限制。
enctype=“multipart/form-data”,這個屬性的作用是將表單資料編碼格式置為multipart/form-data型別，這個編碼型別會對檔案內容在上傳時進行處理，以便伺服器解析檔案的型別和內容。

enctype屬性：
application/x-www=form-urlencoded：預設方式，只處理表單域中的 value 屬性值，將表單域中的值處理成 URL 編碼方式；
multipart/form-data：以二進位制流的方式處理表單資料，除了表單域中的 value 屬性值，還會處理表單域的檔案內容，將其封裝到請求引數中，不會對字元編碼；
text/plain：將空格轉換為+號，其它字元不做編碼處理，適用於通過表單傳送郵件。

小結：

前端檔案上傳實際是檔案內容的傳遞，是資料的傳遞，並非我們常用的檔案的拷貝與複製操作。
傳遞的過程中藥進行編碼來制定資料傳送的規則，方便後端能夠實現一套對應的解析規則來解析。
傳遞的資料規則裡面應該包含檔案的基本資訊，如檔名和檔案型別，方便後端解析時能寫出正確格式的檔案。

後端接受檔案

在伺服器這邊處理請求，並將請求中的檔案取出並重新儲存，最後將程式碼部署到Tomcat上.

在解析請求中的檔案時，需要用到Servlet中的getPart方法.此方法的引數是對應的檔名name

在前端上傳檔案的時候，可以一次選擇多個檔案上傳，其中每個檔案，會被包裝成一個Part物件.每個檔案都會有自己的檔名name,伺服器這邊就可以根據檔名來找到對應的Part，在Part中就包含了對應檔案資訊。

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.IOException;
@MultipartConfig
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.從請求物件中，讀取出Part物件
        Part part =req.getPart("MyImage");
        //2.讀取到Part 物件中的一些引數
        System.out.println(part.getSubmittedFileName()); // 上傳檔案真實的檔名
        System.out.println(part.getContentType()); // 檔案的型別
        System.out.println(part.getSize()); // 檔案的大小

        //3.把檔案寫入到指定的目錄中
        part.write("c:/temp/MyImage.jpg");
        //4.返回一個響應，通知使用者上傳成功
        resp.getWriter().write("upload OK !");
    }
}

程式碼解釋：

接受檔案上傳的Servlet,必須有@MultipartConfig註解，否則Servlet不能正確的讀取請求中的檔案內容
@WebServlet("/upload")這裡的/upload和前端form標籤中的action屬性的值upload正好對應了起來。action屬性會將form表單中的資料傳送到對應的URL中，前端將URL設為upload,那麼後端在構造url的時候也必須和前端的對應起來。否則存取不了Tomcat.
在Servlet中重寫的具體是哪個方法也要和前端method屬性對應起來，前端用的是Post方法，那麼後端在Servlet中重寫的就是doPost方法.
在重寫的方法中，我們首先要通過檔名name獲取到對應的Part物件。前端檔名是MyImage，那麼這裡的引數就必須是MyImage。
獲得物件後，就可以通過Servlet內建的一些方法來獲得檔案的引數資訊，例如檔名，檔案型別，檔案大小等。
然後通過part.write()方法使檔案持久化，也就是將檔案儲存下來，寫入指定的目錄中。這個方法的引數就是想要儲存的路徑
最後可以返回一個響應，通知使用者端上傳成功。

在瀏覽器中輸入URL，傳送請求，開始上傳檔案