vue 阿里雲上傳組件

vue 阿里雲上傳組件

測試項目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官網