實例篇——js之base64上傳圖片


首先要搭建好springmvc,詳見https://www.cnblogs.com/zzb-yp/p/9295397.html

整體思路:前端代碼包括顯示和傳參(這里的參數主要就是圖片的base64字符串),顯示主體部分是type=“file”類型的input組件和一個提交按鈕   

             后端接收傳過來的圖片的base64字符串,將其通過流的形式進行本地保存或者直接保存在數據庫中

1、簡單的兩個組件file組件和button組件

image

file的onchange屬性(在點擊選擇的文件並且與前一次的文件不相同時執行showImg()函數)

button的onclick屬性(點擊按鈕后執行saves()函數)

2、showImg()函數

image

3、saves()函數        (注意注意,這里我有一個寫錯了,在下面第六行的multipart/form-data中,我在下面中間少了一個"-")

image

 

4、后端:解析傳過來的參數+保存文件到本地

image

image

image

 

5、測試結果

      連接服務器

      

      點擊選擇文件,選擇圖片

      

      點擊保存圖片,查看保存在本地的上傳圖片

      

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM