快捷導(dǎo)航

Vue.js上傳圖片到阿里云OSS存儲(chǔ)的方法示例

更新時(shí)間：2018年12月13日 10:19:47 作者：lmwit

這篇文章主要介紹了Vue.js上傳圖片到阿里云OSS存儲(chǔ)的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

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

打開官網(wǎng)，我們鼠標(biāo)挪到產(chǎn)品這一列，展開后，我們點(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)之后好像也沒看到官方提示的demo或者Code,為了不麻煩各位的時(shí)間，我們直接點(diǎn)擊這個(gè)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我首先在index.html引入

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

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

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

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

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

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

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

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

您可能感興趣的文章: