如何在VueJS使用阿里云存儲上傳圖片？

什么是OSS呢？ 其實(shí)按照官網(wǎng)的解釋就是->>阿里云對象存儲服務(wù)（Object Storage Service)

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

（1）首先，打開官網(wǎng)-----https://www.aliyun.com/

打開官網(wǎng)，我們鼠標(biāo)挪到產(chǎn)品這一列，展開后，我們點(diǎn)擊對象存儲OSS

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

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

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

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

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

第一個參數(shù)：object-name* 就是你要上傳到OSS管理控制臺的路徑

我們來結(jié)合input標(biāo)簽看看：

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

首先，我們可以打印一下，看看event打印的東西

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

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

當(dāng)然截串的方式有很多種，哪種方便哪種來吧

拿到后綴之后，接下來我們要做的就是：去拼接上傳路徑

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

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

region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'

公司分工比較明確，有人已經(jīng)在申請好了，拿過來以字符串的形式寫死就可以了。

看完之后，相信你也可以用官方提供的能做出來

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

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

我首先在index.html引入

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

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

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

**@change="handfile($event)"**方法在選擇的文件改變后觸發(fā)，其中$event包含已選擇文件的所有文件信息。

**文件路徑**：**event.target.value**;

造成無效的結(jié)果說明，你每次提交的路徑都是一致的，加上@change="handfile($event)"這個事件也就只有文件路徑event.target.value發(fā)生改變的時候才會觸發(fā)

那么解決辦法就是在你每次上傳文件完了之后，在后面寫上**event.target.value='';**重置一下文件路徑，那么重復(fù)上傳的時候，@change="handfile($event)"才會進(jìn)行重復(fù)觸發(fā)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論