Vue.js上傳圖片到阿里云OSS存儲

Harriet666 發布于2019-08-23 13:55 / 1123人閱讀

摘要：方法在選擇的文件改變后觸發，其中包含已選擇文件的所有文件信息。

如何在VueJS使用阿里云存儲上傳圖片？
什么是OSS呢？其實按照官網的解釋就是->>阿里云對象存儲服務（Object Storage Service)

在實際開發中，公司可能會用到OSS隨時來存儲一些數據，比如像文本、圖片、音頻和視頻等在內的各種非結構化數據文件，恰好，在做項目的時候，剛好用到了OSS存儲，對于我這個萌新，從來沒用過，那么我們先來看看文檔，看看是怎么一回事~看看前端在VueJS的環境下是如何上傳OSS的

（1）首先，打開官網-----https://www.aliyun.com/
打開官網，我們鼠標挪到產品這一列，展開后，我們點擊對象存儲OSS

（2）點擊去之后，鼠標滑到最后，點擊產品文檔

（3）進去之后，我們看到有一大欄內容，不要怕，先做第一波操作，自己慢慢看完官網的一些API或者方法，不要求全部會，但最起碼有個了解

（4）看得是不是頭皮發麻，哈哈，本人也是，我們可以直接看接入OSS部分

（5）進去發現之后好像也沒看到官方提示的demo或者Code,為了不麻煩各位的時間，我們直接點擊這個

我們來看看官方提供的實例代碼，有些人可能一眼就看出來是什么意思了，但是我想解釋一下通過Client調用PUT方法，里面的兩個參數代表是什么意思呢？

第一個參數：object-name* 就是你要上傳到OSS管理控制臺的路徑
我們來結合input標簽看看：

因為我這邊對圖片的類型沒有限制這個要求，所以我選擇了所有類型的圖片格式accept="image/*",接下來我們繼續看：
比如我們在對這個input標簽添加默認改變事件之后，也是@change="handlefile($event)", 然后我們在methods里面定義一個handlefile (event) {}這個方法
首先，我們可以打印一下，看看event打印的東西

我們可以直接看這個target,展開后，我們去找我們需要的東西,或者我們可以直接這樣打印，event.target.files[0],我們來看看結果

我們需要的就是type這個屬性：type="image/jpeg", 因為到時你上傳到公司的OSS管理控制臺，可能是要按照他們提供的地址去拼接，所以我們拿到這個type屬性進行截串，拿到格式的后綴.jpeg

當然截串的方式有很多種，哪種方便哪種來吧
拿到后綴之后，接下來我們要做的就是：去拼接上傳路徑

其中date是時間戳，用來加以區分唯一性，并且你也可以在拼的時候加上自己的標識

第二個參數：local-file 就是input標簽的file屬性（event.target.files[0]*）
當了解完這兩個參數后，至于前面的

region: "",
accessKeyId: "",
accessKeySecret: "",
bucket: "Your bucket name"

公司分工比較明確，有人已經在申請好了，拿過來以字符串的形式寫死就可以了。
看完之后，相信你也可以用官方提供的能做出來

那么在VueJS中怎么去做呢，第一種做法就是你可以直接npm install ali-oss --save, 然后創建一個JS文件，然后導入進去

接著，就是你需要用到的地方去調用client的PUT 方法，然后去執行，第二種方法就是我并沒有用官方提供的try catch去做，我是這樣做的
我首先在index.html引入

接著，我在需要用的地方通過client 去調用PUT方法：

那么在成功的回調中，就可以拿到圖片的URL，那么就可以了~簡單的圖片的上傳就OK了，但是另外延伸一點東西，就是，因為做的是IM聊天的東西，當我上傳同一文件多次的時候，會出現無效的情況，后來我去了解了一下，就是說：我們先回到這張圖

解釋： @click="headImage"用于觸發Input被點擊，用于選擇文件。

  **@change="handfile($event)"**方法在選擇的文件改變后觸發，其中$event包含已選擇文件的所有文件信息。
  **文件路徑**：**event.target.value**;
  造成無效的結果說明，你每次提交的路徑都是一致的，加上@change="handfile($event)"這個事件也就只有文件路徑event.target.value發生改變的時候才會觸發
  那么解決辦法就是在你每次上傳文件完了之后，在后面寫上**event.target.value="";**重置一下文件路徑，那么重復上傳的時候，@change="handfile($event)"才會進行重復觸發
 萌新剛開車，哪里不足，望多多指導，覺得還不錯的點個贊吧~~~~~~

云服務器上傳圖片到oss ios阿里云oss上傳圖片上傳圖片到騰訊云cos對象存儲阿里云oss掛載到服務器上傳文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99794.html

SpringBoot 整合阿里云OSS 存儲服務，快來免費搭建一個自己的圖床

摘要：筆主很早就開始用阿里云存儲服務當做自己的圖床了。阿里云對象存儲文檔，本篇文章會介紹到整合阿里云存儲服務實現文件上傳下載以及簡單的查看。 Github 地址：https://github.com/Snailclimb/springboot-integration-examples(SpringBoot和其他常用技術的整合,可能是你遇到的講解最詳細的學習案例,力爭新手也能看懂并且能夠在看完...

鄒強 2019-08-16 13:56 評論0 收藏0
解決博客圖片存儲——阿里云的OSS運用

摘要：接下來講解一下博客中用的圖床阿里云對象存儲，簡稱，雖然目前大家用的比較多的是七牛云之類的，但是因為我個人原因我還是選擇了阿里云，后面我會簡單說明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算寫一篇有關個人博客SEO優化的體驗和一些自身體會，但是發現自己還沒完全...

Lowky 2019-08-29 12:31 評論0 收藏0
解決博客圖片存儲——阿里云的OSS運用

摘要：接下來講解一下博客中用的圖床阿里云對象存儲，簡稱，雖然目前大家用的比較多的是七牛云之類的，但是因為我個人原因我還是選擇了阿里云，后面我會簡單說明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算寫一篇有關個人博客SEO優化的體驗和一些自身體會，但是發現自己還沒完全...

incredible 2019-08-01 16:46 評論0 收藏0