最近因為業(yè)務(wù)需要，要實現(xiàn)一個將base64編碼圖片上傳到七牛的功能，因為不是通過input的file選擇框來還選擇圖片上傳，所以沒有辦法使用element-ui提供的方便又好用的el-upload組件了。

以前也沒做過呀，這可咋整呢？所謂萬事不決問百度嘛，于是百度之，沒想到很快就找到了答案，而且這上個功能七牛官網(wǎng)已經(jīng)有很詳盡的文檔和示例了。

可是，他們這文檔，寫得理解起來讓人感覺有點費勁，至少本人就理解了好一會兒，所以希望能用自己的理解來把這份文檔翻譯一遍！

翻譯開始

參數(shù)解釋

這里接口說明中POST指的是上傳的路徑（即上傳地址中的pathname部分），帶<>號的是變量參數(shù)，具體講一講Fsize和EncodedKey兩個，因為我這次只用到了這兩個，另外兩個EncodedMimeType和Crc32我沒用到，也沒弄清楚是干嘛的，所以無從談起！

Fsize: 說明里已經(jīng)講清楚了，這就是限制上傳文件的大小的，當(dāng)然可以為-1，就是不主動限制，根據(jù)http請求的body自身的限制為準(zhǔn)，這里因為我沒法確定自己截的圖多大，我選擇了-1；

EncodedKey 這個的說明就有點費解了：

如果沒有指定則：如果 uptoken.SaveKey 存在則基于 SaveKey 生產(chǎn) key，否則用 hash 值作 key。EncodedKey 需要經(jīng)過 base64 編碼。具體可以參照：URL 安全的 Base64 編碼

到底是用來干嘛的呢？

其實就是設(shè)置上傳后圖片的在七牛服務(wù)器里所存的文件名的，如果不設(shè)置，那么就跟hash一樣！什么意思？

是的，如果你沒設(shè)置這個值，那上傳的文件名，就是七牛自動幫你生成的hash值，而且沒有后綴名！瀏覽器可以識別，但如果用戶想要保存下來，那就尷尬了——下載下來的東西都不知道是個啥，因為看著就不像圖片，比如是一張報銷的電子發(fā)票，那是不是很不直觀？可能會影響財務(wù)的心情，惹毛了財務(wù)扣你工資可就虧大了！所以呢，還是配置一下為妙！

值得注意的是：說明文檔里赫赫顯示著的這幾個字——需要經(jīng)過 base64 編碼，你沒看錯，必須把你想命名的名字(比如：20201224162721914S.jpeg)先轉(zhuǎn)成base64編碼，否則會報錯！幸運的是，JavaScript已經(jīng)提供了這樣的api，它就是btoa()。

還有一個值得注意的是：這個名字不能重復(fù)使用~ 也就是你必須每次上傳的圖片的名字都要用不同的名字，否則七牛就會告訴你file exists(文件已存在)。所以這里我就用了當(dāng)前時間戳來生成了圖片名！

request的示例代碼

官方這是用原生js給出了示例代碼，當(dāng)然，你也可能結(jié)合自己的項目使用jquery、axios。

參數(shù)解釋2

1. pic 就是你生成的base64編碼后的圖片，就是那串很長很長的base64字符串，需要注意的是這里必須要把base64,以及之前的前綴部分去掉，需要怎么生成你的base64編碼圖片，那就是你自己的業(yè)務(wù)需求了，我是因為要自動截取網(wǎng)頁中某塊元素的內(nèi)容生成圖片，所以使用了html2canvas生成圖片（html2canvas使用過程中也遇到一些，后面另起一篇來把坑點寫一寫吧）；

2. url 上傳的地址，其中的域名部分是分區(qū)域的，應(yīng)該是看你自己的服務(wù)器身處于哪個區(qū)域，注意事項里有很詳盡的說明：upload.qiniup.com 上傳域名適用于華東空間。華北空間使用 upload-z1.qiniup.com，華南空間使用 upload-z2.qiniup.com，北美空間使用 upload-na0.qiniup.com；

3. Authorization: 這個是你們公司后端（如果你是一個牛逼的全棧工程師另說）調(diào)用七牛接口獲取到的token，這里值得注意的是 UpToken 這一串字符不能少，包括那個空格！

寫在最后

以上是自己看官方文檔，實操中發(fā)的一些理解，開始有些棘手，但最后總算成功了，所以寫下此篇以加深印象，如果有同樣需要的同學(xué)，也可參考！

了解更多，請點擊：https://www.bilibili.com/video/BV13p4y167vu

作者：沐浴點陽光
鏈接：https://juejin.cn/post/6909753210756399112
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。