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

如何在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: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your 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)"纔會進行重複觸發
 萌新剛開車，哪裏不足，望多多指導，以爲還不錯的點個贊吧~~~~~~