用element ui上傳圖片到七牛踩過的坑

前端上傳圖片到七牛雲的流程

1. 請求後端接口獲取上傳憑證
2. 請求七牛雲地址上傳圖片到七牛雲
3. 上傳完畢將得到七牛雲返回的圖片地址

七牛雲地址

說到七牛雲地址，奴家真的是一把鼻涕一把淚
剛開始作圖片上傳的時候，沒有好好看七牛雲文檔，結果跌了個大坑
後臺把將預覽地址當成上傳地址給我，結果一直報錯：Document not found

心塞，幸苦一位大神耐心指點，才從坑裏跳出來
每一個七牛雲存儲區域都對應着相應的服務器端客戶端上傳域名
https://developer.qiniu.com/k...

token有了，域有了，我覺得我離成功只有一步之遙了（其實還差十萬八千里）

多張圖片上傳

element ui裏面的upload組件默認是當即上傳圖片，而咱們的需求是點擊肯定按鈕以後再上傳多張圖片

查看element ui關於upload組件的介紹發現auto-upload屬性能夠控制選取圖片是否當即上傳

因此下一步我把代碼改爲這樣

這樣作確實能夠將多張圖片上傳到七牛雲
哇，作到這一步真的是好開心（第一次用element ui上傳圖片到七牛雲，見諒見諒！！！）
but。。。。。。
項目經理說，上傳到七牛雲的照片必須按照上傳時間的格式從新命名，這個好說呀，我又將代碼改爲這個樣子了

這下應該完美了吧！！！
測試一下，簡直要炸了，炸了！！！
無論我提交幾張圖片，最後能上傳的就只有一張圖片，除了成功上傳圖片的那個請求，其餘請求都返回錯誤：圖片已存在。
what???寶寶內心想哭！！！
慌了，從新看一遍文檔，各類百度，束手無策，還好在我絕望的前一秒，迎來了柳暗花明，哈哈哈。。。。。。

element ui上傳多張圖片到七牛雲並對圖片重命名

既然element ui默認的上傳方式不行，那就只能用http-request屬性來重寫上傳方式

因而，個人代碼升級成這個樣子

多張圖片上傳到七牛雲以前對圖片重命名，壓縮，都在重寫http-request時解決了