前言:最近在做公司項目中,需要將病例照片存儲。發現傳統的存儲至后台,渲染加載的延時會特別高,所以就想到用七牛雲進行圖片資源的存儲,下面就談談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.修改圖片也是如此步驟,即可理解為二次上傳