上傳文件到七牛雲返回文件URL地址並保存到數據庫

話很少說，直接看效果：🙊

在開發項目的時候，常常會用到上傳文件的功能，若是把圖片、文件全都存放在業務服務器的項目路徑下，會致使項目愈來愈臃腫，所以能夠考慮把圖片、文件的上傳交給第三方處理，最近在作一個項目，須要將PDF文件上傳到服務器，在網上了解了一下，發現用得最多的就是採用七牛雲進行存儲。因而決定折騰折騰~🔨🔍

七牛雲官網的介紹：看上去還不錯的樣子

經過七牛雲獲取文件資源確實比直接經過本身的業務服務器獲取的速度要快得多。並且，已認證我的用戶每月免費額度10G的存儲空間。這個優惠是每月都有的，最主要仍是免費，😎對於業務量不大的使用場景徹底夠用。

七牛雲準備工做

七牛雲註冊登陸：七牛雲官網

一、填寫相關信息

二、完成註冊

七牛雲是須要實名認證的，上傳身份證正反面之類的，大概一個小時左右就認證成功了，效率真是棒棒噠~ 🙂

三、新建存儲空間

進入 對象存儲菜單，點擊 新建存儲空間。

存儲空間名稱能夠隨便取，我已經建立過這個存儲空間了，這裏的 存儲空間名稱要記住，以後在代碼裏面會用到~ 存儲區域儘可能選擇本身產品用戶所在區域較多的存儲區域。

代碼實現

七牛雲提供的上傳文件的方式有兩種：具體可查看 七牛雲官方API文檔

• 後端上傳（服務端直傳）：經過客戶端，先將文件上傳到你項目的服務端，再由服務端上傳到七牛雲空間

• 前端上傳（客戶端上傳）：經過客戶端，由前端js，直接將文件上傳到七牛雲空間

兩種方式均可以完成上傳，可是前者還需佔用你的業務服務端的帶寬來上傳文件，而後再由服務端上傳到七牛；然後者僅佔用客戶端的資源，這樣能夠減輕服務端的壓力。

後端上傳

由於我是使用Java來實現的，用Java SSM框架來作的上傳接口，實現以下：

一、下載七牛雲的jar包，可在七牛雲的文檔中心找到jar包的下載連接 七牛雲Java SDK

而後將下載的jar包導入到本身項目裏面。

（這裏我遇到了一個坑，有些jar包並非必須的，得根據你使用上傳文件的方式和文件上傳成功以後解析的方式來選擇，可是qiniu-java-sdk確定是必須的，並且每一個jar包的版本要對應，不然項目運行時極可能報各類錯誤！本身折騰了一段時間以後，仍是存在問題，以致於心態差點炸了，後來聯繫七牛雲的客服才知道是最新的sdk的版本不兼容個人Java環境了。🙄）

二、建立七牛雲操做工具類QiniuCloudUtil.java

• 進入帳號的管理控制檯： 獲取七牛雲帳號的AK和SK、獲取要上傳的空間名稱（上面建立存儲空間名稱）、獲取文件上傳的路徑：

• 進入我的中心-密鑰管理

• 進入對象存儲-選擇存儲空間-內容管理

這裏的外鏈名需綁定本身的域名，默認有七牛的測試域名~ 還有其餘的一些配置：如給圖片添加水印、設置樣式分隔符等等，根據業務需求自行選擇配置與否，如何配置可查看七牛的 配置管理文檔

完整的七牛雲操做工具類QiniuCloudUtil.java：

點擊下載源文件： QiniuCloudUtil.java

該類實現了三種上傳文件的方式：

1. 普通上傳
2. Base64編碼方式上傳
3. 字節數組上傳

七牛雲官網還提供了更多的上傳方式，如覆蓋上傳、數據流上傳、斷點續傳之類的，以及自定義回覆內容等等，可自行查看 API

三、後端接口實現（只貼出了核心代碼）

控制層UploadController.java：

點擊下載源文件： UploadController.java

接口實現層UploadImplement.java：

點擊下載源文件： UploadImplement.java

這裏使用的是字節數組的方式上傳文件，這裏也遇到了個坑，文件上傳成功了，可是返回的URL地址倒是null，也就是文件的key和hash值沒有解析出來，若是是這個緣由，能夠嘗試將getToken()改成upToken，也就是上傳文件的時候從新生成Token，而後問題解決，返回了正確的URL地址~🐵

四、上傳測試（使用Postman接口調試工具，上傳了一張圖片）

圖片上傳成功，返回的外鏈地址fielUrl，經過該URL地址就能拿到圖片🌝🌚

👇

前端上傳

步驟：前端經過服務端獲得客戶端上傳憑證Token，而後再經過七牛雲提供的接口進行上傳，成功後返回文件的外鏈地址fileURL。

其實不論是前端上傳仍是後端上傳都須要七牛雲生成的這個Token才能上傳文件，那麼如何獲得這個Token：

獲取七牛雲Token的方法已經包含在上面的👆七牛雲操做工具類 QiniuCloudUtil.java裏面。

前端上傳代碼實現

文首的上傳pdf文件並實時預覽的效果：

技術棧：前端框架 Vue.js，使用了UI框架Element的 Upload組件 進行文件上傳，使用axios請求數據，使用 vue-pdf組件來將pdf文件顯示在頁面上。

實現該功能的流程是：直接由前端上傳pdf文件到七牛雲空間，上傳文件以前經過本身的業務服務器生成七牛雲的Token，將此Token返回給客戶端，上傳文件時攜帶這個Token，將文件上傳到七牛雲，成功以後返回pdf文件的外鏈URL地址，客戶端再將這個URL地址保存到數據庫表裏，最後獲取數據庫表裏面的fileUrl字段，前端將pdf文件經過vue-pdf組件渲染顯示在頁面上。

我爲何會將返回的URL地址保存到數據庫表裏呢，這得根據本身的業務場景來考慮，我這裏是爲了方便統一管理，每次更新文件時只須要將返回的URL地址更新到數據庫表裏面就OK了。🐔🐧🐦🐤🐒

• axios請求數據： axios

  

• el-upload組件：Upload組件

  

action="upload-z2.qiniup.com" 是必選參數，上傳到七牛雲的接口地址

根據建立的七牛雲存儲區域選擇上傳的接口地址（個人存儲區域是華南，因此上傳地址是http://upload-z2.qiniup.com）七牛雲存儲接口地址

前端上傳文件的核心代碼文件：myresume.vue

點擊下載源文件： myresume.vue

上傳測試：

總結

這個上傳文件到七牛雲空間的功能雖然並不複雜，可是我本身在實現的過程當中仍是踩了不少的坑，經過搜索引擎和查看七牛的API文檔找到了一些坑的根源，並一步一步的把坑填掉，寫這篇文章的目的就是不斷的在總結學習到的知識，把學習的知識再總結出來，是對已掌握知識的又一次昇華，同時，也但願其餘朋友👬在實現該功能的時候，能夠少踩點坑，填坑雖然很痛苦，但每一次填坑都是在不斷學習，不斷進步！

完整的項目源碼不方便貼出來，只貼了實現該功能的核心代碼，有任何疑問的朋友👬能夠加我微信號：i924721970 聯繫！若其餘大神有更好的使用心得也能夠告訴做爲菜鳥的我，但願能和你們交個朋友，一塊兒討論，一塊兒學習！

原創不易，轉載請註明出處，感謝！👨‍💻

今日寄語：

"全部的幸運，其實都有另外一個名字：努力"

歡迎關注我的微信公衆號：桃李報春