vue 阿里雲上傳組件

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

測試項目git地址

本測試項目啟動方法

示例鏈接

組件配置項

實踐解釋

本文主要介紹如何

1. 在vue項目中使用web
2. 直傳方式上傳阿里雲oss圖片

默認讀者對vue框架和阿里雲oss有一定的了解
整體的流程是加載好阿里雲sdk -> 初始化上傳客戶端client -> 等待文件選擇 -> 文件選擇進行上傳 -> 分發上傳結果
可以直接復制代碼使用,也可以npm 組件地址

npm 使用

$ npm i vue-oss-uploader

vue中引用

// main.js 安裝插件
import vueOssUploader from 'vue-oss-uploader'
import 'vue-oss-uploader/npm/static/css/vue-oss-uploader.min.css'
Vue.use(vueOssUploader)

具體的配置項請查看組件配置項

配置項

名稱	意義	類型	默認值
debug	是否開啟debug模式	Boolean	false
path	保存的路徑	String	空字符串
nameMode	文件名方式	Number	1（1隨機名稱，2默認名稱，3自定義名稱）
name	自定義名稱內容，當nameMode為3時生效	String	空字符串
fileType	文件類型	String	默認img（會校驗文件的后綴，校驗正則為/.(png	jpe?g	gif	svg)(?.*)?$/），暫時不支持其他值
fileSuffix	文件后綴	String	空字符串（當本項不為空時表示只支持本后綴的文件上傳）
keySet	阿里雲配置項	Object	詳見配置項解釋

keySet配置項

名稱	意義	類型	默認值
key	阿里雲的accessKeyId	String	空字符串
secret	阿里雲的accessKeySecret	String	空字符串
bucket	阿里雲的bucket	String	空字符串
region	阿里雲所在區域	String	shanghai

事件

名稱	說明	參數
error	錯誤事件	msg
success	上傳成功,返回路徑和拼接的url	{ossPath,ossUrl}

```<!-- html中使用 --> <vueOssUploader :path="path" :debug="true" :name-mode="nameMode" :keySet="keySet" :name="name" v-on:success="uploaded" @error="showError"></vueOssUploader> ```

使用過程中我碰到以下的坑：

1. 本文使用的是js引入形式的阿里雲sdk，用npm形式的sdk會需要一些后端的node功能，不能用於web直傳。

可以直接在html里面加上script標簽

```<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script> ```

組件里我包裝了一個異步獲取sdk的方法LoadJS，感興趣的可以看一下

2. 使用js引入形式的sdk會有一個異步的問題，就是client初始化的時候sdk可能還沒加載好，我是在vue的mouted鈎子函數內設置了一個定時器，當SDK加載的完成之后再來初始化client

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里雲oss初始化完成')
  } else {
    this.debug && window.console.log('阿里雲oss初始化中...')
  }
}, 500)

3. 如果你的項目是https環境下的，需要保證初始化client的時候配置secure為true，不然無法上傳文件

4. 在默認情況下，保存的圖片名會取一個隨機的字符串，但是同一張圖片多次上傳就會保存多個相同圖片，這邊我做了一個優化，將圖片的大小和高寬拼接成一個字符串，再對這個字符串進行md5 hash化處理，這樣同一張圖片上傳多次也只會保存一張

有什么問題或者疑問，請在下方評論或者在github上提issue都可以

參考鏈接

1. 阿里雲oss文檔
2. vue官網

原文地址：https://segmentfault.com/a/1190000013054033