vue工程中使用七牛雲存儲圖片


前言:最近在做公司項目中,需要將病例照片存儲。發現傳統的存儲至后台,渲染加載的延時會特別高,所以就想到用七牛雲進行圖片資源的存儲,下面就談談vue項目中具體的使用

vue項目中使用的是element-ui中的el-upload上傳組件

xRayHttpRequest中可獲取到對應的上傳組件獲取的圖片信息資源

 

 需要說明的是如果不需要使用七牛雲,在這就可以調用接口,將圖片數據傳至后台保存

七牛雲的使用需要先獲取七牛雲的加速域名,所以在組件的生命周期中先調用接口獲取

接口調用返回值如下:

 

 

 

 加速域名link和token都獲取完畢后就開始正式的存儲照片至七牛雲了

 

 

 上面的七牛上傳地址是七牛文檔中的域名,即為http://up.qbox.me/putb64/-1/key/

 

 上面獲取token時獲取的加速域名link拼接上七牛返回的key就是圖片的路徑,后續只需要將此路徑存儲至后台即可,到此就是一個完整的七牛照片上傳步驟。

總結:

1.上傳組件先在生命周期中調用接口獲取加速域名link和請求頭token

2.上傳圖片資源至七牛,注意獲取時間戳base64位編碼和請求頭token設置

3.上傳至七牛后獲取到返回的key,link+key就是當前圖片的url,后續調用接口存儲至后台即可,到此一個完整的上傳結束

4.修改圖片也是如此步驟,即可理解為二次上傳


免責聲明!

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



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