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

悠悠風來發表於2017-12-04

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

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

七牛雲地址

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

clipboard.png

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

clipboard.png

token有了,域有了,我以為我離成功只有一步之遙了(其實還差十萬八千里)

多張圖片上傳

clipboard.png

element ui裡面的upload元件預設是立即上傳圖片,而我們的需求是點選確定按鈕之後再上傳多張圖片

clipboard.png

檢視element ui關於upload元件的介紹發現auto-upload屬性可以控制選取圖片是否立即上傳

clipboard.png
所以下一步我把程式碼改成這樣

clipboard.png

clipboard.png

clipboard.png

這樣做確實可以將多張圖片上傳到七牛雲
哇,做到這一步真的是好開心(第一次用element ui上傳圖片到七牛雲,見諒見諒!!!)
but。。。。。。
專案經理說,上傳到七牛雲的照片必須按照上傳時間的格式重新命名,這個好說呀,我又將程式碼改成這個樣子了

clipboard.png
這下應該完美了吧!!!
測試一下,簡直要炸了,炸了!!!
不管我提交幾張圖片,最後能上傳的就只有一張圖片,除了成功上傳圖片的那個請求,其他請求都返回錯誤:圖片已存在。
what???寶寶心裡想哭!!!
慌了,重新看一遍文件,各種百度,一籌莫展,還好在我絕望的前一秒,迎來了柳暗花明,哈哈哈。。。。。。

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

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

clipboard.png
於是,我的程式碼升級成這個樣子

clipboard.png

clipboard.png

clipboard.png
多張圖片上傳到七牛雲之前對圖片重新命名,壓縮,都在重寫http-request時解決了

相關文章