java前端傳base64,后臺轉成文件并存儲的實現(xiàn)

更新時間：2026年02月04日 17:28:54 作者：果仁栗子糕

文章介紹了如何實現(xiàn)一個單獨的H5頁面用于手繪簽名并上傳服務器,包括如何從掃碼跳轉的鏈接中截取參數以及如何將字節(jié)碼轉換為文件上傳

需求

單獨的H5頁面實現(xiàn)手繪簽名，然后上傳服務器，并修改數據，首先項目中是掃碼跳轉到H5頁面，那鏈接中需要帶參數，怎么截取參數？

下面是截取路徑，獲得值

var varurl = window.location.search; //獲取url中"?"符后的字串
                if (varurl.indexOf("?") != -1) { //判斷是否有參數
                    varstr = varurl.substr(1); //從第一個字符開始 因為第0個是?號 獲取所有除問號的所有符串
                    var strs = varstr.split("="); //用等號進行分隔 （因為知道只有一個參數 所以直接用等號進分隔 如果有多個參數 要用&號分隔 再用等號進行分隔）
                    console.log(strs[1]); //直接彈出第一個參數 （如果有多個參數 還要進行循環(huán)的）
                    id = strs[1];
                }

后臺接受字節(jié)碼并轉換成文件上傳

@RequestMapping(value = "/uploadBase64", method = {RequestMethod.POST})
    @ResponseBody
    public Object uploadBase64(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String base64String = request.getParameter("signatureBase64");
        if (StringUtils.isBlank(base64String)) {
            return new JsonResult(false, "上傳失敗", "");
        }
        logger.info("======開始上傳圖片======");
        String imgUrl = "";
        String msg = "";
        Boolean result = false;
        MultipartFile file = Base64DecodMultipartFileUtil.base64ToMultipart(base64String);
        if (Objects.nonNull(file)) {
            try {
                String path = getCompleteImgPath(request, file);
                imgUrl = path.replace("\\", "/");
                result = true;
                msg = SysCode.SUCCESS.getDesc();
                logger.info("======圖片上傳成功,路徑======" + path.replace("\\", "/"));
            } catch (Exception e) {
                logger.error("圖片上傳失敗:" + e.getMessage(), e);
                e.printStackTrace();
                msg = "上傳失敗!";
            }
        } else {
            logger.error("圖片上傳失敗");
        }
        logger.info("======圖片上傳結束======");
        return new JsonResult(result, msg, imgUrl);

    }

//base64轉文件
public static MultipartFile base64ToMultipart(String base64) {
   try {
      String[] baseStrs = base64.split(",");
      BASE64Decoder decoder = new BASE64Decoder();
      byte[] b = new byte[0];
      b = decoder.decodeBuffer(baseStrs[1]);
      for (int i = 0; i < b.length; ++i) {
         if (b[i] < 0) {
            b[i] += 256;
         }
      }
      return new Base64DecodMultipartFileUtil(b, baseStrs[0]);
   } catch (IOException e) {
      e.printStackTrace();
      return null;
   }
}
//獲取文件路徑
public static String getCompleteFilePath(HttpServletRequest request, MultipartFile uploadFile) throws Exception {
    String logoPathDir = SysConstants.TOMCAT_FILE_URL;
    /**
     * 得到文件保存目錄的真實路徑
     */
    String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);
    /**
     * 根據真實路徑創(chuàng)建目錄
     */
    File logoSaveFile = new File(logoRealPathDir);
    if (!logoSaveFile.exists()) {
        logoSaveFile.mkdirs();
    }
    /**
     * 獲取文件的后綴
     */
    System.out.println(uploadFile.getOriginalFilename());
    String suffix = uploadFile.getOriginalFilename().substring(uploadFile.getOriginalFilename().lastIndexOf("."));
    /**
     * 使用UUID生成文件名稱
     */
    String imageName = RandomUtil.getUuid() + suffix;// 構建文件名稱
    /**
     * 拼成完整的文件保存路徑加文件
     */
    String fileName = logoRealPathDir + File.separator + imageName;
    File file = new File(fileName);
    uploadFile.transferTo(file);

    FileChannel in = null;
    FileChannel out = null;
    FileInputStream inStream = null;
    FileOutputStream outStream = null;
    try {
        inStream = new FileInputStream(file);
        outStream = new FileOutputStream(PathUtil.getImgBasePath() + File.separator + imageName);
        in = inStream.getChannel();
        out = outStream.getChannel();
        in.transferTo(0, in.size(), out);
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        inStream.close();
        in.close();
        outStream.close();
        out.close();
    }
    return PathUtil.getImgPath(imageName);
}