Struts2 圖片 Base64 編碼上傳至數據庫完整實現

方案概覽

採用 Struts2 文件上傳攔截器接收文件，服務端轉為 Base64 字符串存入數據庫（BLOB/TEXT 字段），前端預覽使用 Data URL 格式。適用於小型圖片（<3MB）、簡單業務場景。

前端頁面代碼

<div>
  <span id="uploadImg">
    <span>+</span>
    <img id="preview" src="" style="max-width:200px; display:none;" />
  </span>
  <input type="file" name="imgCard" id="imgFileBtn" accept="image/*" onchange="setImagePreview();" />
</div>

<script>
function setImagePreview() {
  var file = document.getElementById('imgFileBtn').files[0];
  if (!file) return;
  
  // 客戶端預覽
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('preview').src = e.target.result;
    document.getElementById('preview').style.display = 'block';
  };
  reader.readAsDataURL(file);
}
</script>

後端 Action 代碼

public class ImageUploadAction extends ActionSupport {
    private File imgCard;                    // 上傳文件
    private String imgCardContentType;       // MIME 類型
    private String imgCardFileName;          // 原始文件名
    
    // Getter/Setter 省略
    
    public String execute() {
        // 1. 校驗文件類型
        String[] allowedExts = {".jpg", ".jpeg", ".bmp", ".png"};
        boolean isImage = false;
        for (String ext : allowedExts) {
            if (imgCardFileName.toLowerCase().endsWith(ext)) {
                isImage = true;
                break;
            }
        }
        if (!isImage) {
            addFieldError("imgCard", "不支持的圖片格式");
            return INPUT;
        }
        
        // 2. 校驗大小（3MB）
        if (imgCard.length() > 3 * 1024 * 1024) {
            addFieldError("imgCard", "圖片大小不能超過 3MB");
            return INPUT;
        }
        
        try {
            // 3. 讀取並轉碼
            BufferedImage bi = ImageIO.read(imgCard);
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(bi, "jpg", baos);  // 統一轉 JPEG
            byte[] bytes = baos.toByteArray();
            
            // 4. Base64 編碼
            BASE64Encoder encoder = new BASE64Encoder();
            String base64Str = encoder.encodeBuffer(bytes).trim();
            
            // 5. 存入數據庫（此處省略 DAO 調用）
            // imageDAO.save(base64Str, imgCardFileName, "image/jpeg");
            
            // 6. 返回前端預覽用 Data URL
            ServletActionContext.getRequest().setAttribute("previewBase64", "data:image/jpeg;base64," + base64Str);
            
            return SUCCESS;
        } catch (IOException e) {
            e.printStackTrace();
            addActionError("圖片處理失敗：" + e.getMessage());
            return ERROR;
        }
    }
}

Struts2 配置關鍵點

<!-- struts.xml -->
<action name="uploadImage" class="com.example.ImageUploadAction">
    <interceptor-ref name="fileUpload">
        <param name="maximumSize">3145728</param>  <!-- 3MB -->
        <param name="allowedTypes">image/jpeg,image/png,image/bmp</param>
    </interceptor-ref>
    <interceptor-ref name="defaultStack"/>
    <result name="success">/preview.jsp</result>
    <result name="input">/upload.jsp</result>
</action>

預覽頁面

<img src="${previewBase64}" alt="上傳預覽" />

優缺點權衡

生產環境建議

1. 小圖標/頭像：Base64 入庫可接受
2. 業務大圖：對象存儲（OSS/S3）+ 數據庫存 URL
3. 混合方案：縮略圖 Base64 入庫，原圖存 OSS
4. 必須加索引：文件名、上傳時間、業務 ID 建立聯合索引

常見坑點提示

• Struts2 默認上傳大小 2MB，需配置 maximumSize
• 文件名中文亂碼：Action 中用 new String(name.getBytes("ISO-8859-1"), "UTF-8") 轉碼
• ImageIO 不支持 WebP，需引入 TwelveMonkeys ImageIO 插件
• Base64 字符串過長導致 SQL 超限，用 TEXT/BLOB 類型