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

如何在VueJS使用阿里云存儲(chǔ)上傳圖片？
什么是OSS呢？ 其實(shí)按照官網(wǎng)的解釋就是->>阿里云對(duì)象存儲(chǔ)服務(wù)（Object Storage Service)

在實(shí)際開(kāi)發(fā)中，公司可能會(huì)用到OSS隨時(shí)來(lái)存儲(chǔ)一些數(shù)據(jù)，比如像文本、圖片、音頻和視頻等在內(nèi)的各種非結(jié)構(gòu)化數(shù)據(jù)文件，恰好，在做項(xiàng)目的時(shí)候，剛好用到了OSS存儲(chǔ)，對(duì)于我這個(gè)萌新，從來(lái)沒(méi)用過(guò)，那么我們先來(lái)看看文檔，看看是怎么一回事~看看前端在VueJS的環(huán)境下是如何上傳OSS的

（1）首先，打開(kāi)官網(wǎng)-----https://www.aliyun.com/
打開(kāi)官網(wǎng)，我們鼠標(biāo)挪到產(chǎn)品這一列，展開(kāi)后，我們點(diǎn)擊對(duì)象存儲(chǔ)OSS

（2）點(diǎn)擊去之后，鼠標(biāo)滑到最后，點(diǎn)擊產(chǎn)品文檔

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

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

（5）進(jìn)去發(fā)現(xiàn)之后好像也沒(méi)看到官方提示的demo或者Code,為了不麻煩各位的時(shí)間，我們直接點(diǎn)擊這個(gè)

我們來(lái)看看官方提供的實(shí)例代碼，有些人可能一眼就看出來(lái)是什么意思了，但是我想解釋一下通過(guò)Client調(diào)用PUT方法，里面的兩個(gè)參數(shù)代表是什么意思呢？

第一個(gè)參數(shù)：object-name* 就是你要上傳到OSS管理控制臺(tái)的路徑
我們來(lái)結(jié)合input標(biāo)簽看看：

因?yàn)槲疫@邊對(duì)圖片的類(lèi)型沒(méi)有限制這個(gè)要求，所以我選擇了所有類(lèi)型的圖片格式accept="image/*",接下來(lái)我們繼續(xù)看：
比如我們?cè)趯?duì)這個(gè)input標(biāo)簽添加默認(rèn)改變事件之后，也是@change="handlefile($event)", 然后我們?cè)趍ethods里面定義一個(gè)handlefile (event) {}這個(gè)方法
首先，我們可以打印一下，看看event打印的東西

我們可以直接看這個(gè)target,展開(kāi)后，我們?nèi)フ椅覀冃枰臇|西,或者我們可以直接這樣打印，event.target.files[0],我們來(lái)看看結(jié)果

我們需要的就是type這個(gè)屬性：type="image/jpeg", 因?yàn)榈綍r(shí)你上傳到公司的OSS管理控制臺(tái)，可能是要按照他們提供的地址去拼接，所以我們拿到這個(gè)type屬性進(jìn)行截串，拿到格式的后綴.jpeg

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

其中date是時(shí)間戳，用來(lái)加以區(qū)分唯一性，并且你也可以在拼的時(shí)候加上自己的標(biāo)識(shí)

第二個(gè)參數(shù)：local-file 就是input標(biāo)簽的file屬性 （event.target.files[0]*）
當(dāng)了解完這兩個(gè)參數(shù)后，至于前面的

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

公司分工比較明確，有人已經(jīng)在申請(qǐng)好了，拿過(guò)來(lái)以字符串的形式寫(xiě)死就可以了。
看完之后，相信你也可以用官方提供的能做出來(lái)

那么在VueJS中怎么去做呢，第一種做法就是你可以直接npm install ali-oss --save, 然后創(chuàng)建一個(gè)JS文件，然后導(dǎo)入進(jìn)去

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

接著，我在需要用的地方通過(guò)client 去調(diào)用PUT方法：

那么在成功的回調(diào)中，就可以拿到圖片的URL，那么就可以了~簡(jiǎn)單的圖片的上傳就OK了，但是另外延伸一點(diǎn)東西，就是，因?yàn)樽龅氖荌M聊天的東西，當(dāng)我上傳同一文件多次的時(shí)候，會(huì)出現(xiàn)無(wú)效的情況，后來(lái)我去了解了一下，就是說(shuō)：我們先回到這張圖

解釋?zhuān)?@click="headImage"用于觸發(fā)Input被點(diǎn)擊，用于選擇文件。

  **@change="handfile($event)"**方法在選擇的文件改變后觸發(fā)，其中$event包含已選擇文件的所有文件信息。
  **文件路徑**：**event.target.value**;
  造成無(wú)效的結(jié)果說(shuō)明，你每次提交的路徑都是一致的，加上@change="handfile($event)"這個(gè)事件也就只有文件路徑event.target.value發(fā)生改變的時(shí)候才會(huì)觸發(fā)
  那么解決辦法就是在你每次上傳文件完了之后，在后面寫(xiě)上**event.target.value="";**重置一下文件路徑，那么重復(fù)上傳的時(shí)候，@change="handfile($event)"才會(huì)進(jìn)行重復(fù)觸發(fā)
 萌新剛開(kāi)車(chē)，哪里不足，望多多指導(dǎo)，覺(jué)得還不錯(cuò)的點(diǎn)個(gè)贊吧~~~~~~