vue阿里雲上傳組件詳解

本文主要介紹如何在vue專案中使用web直傳方式上傳阿里雲oss圖片，預設讀者對vue框架和阿里雲oss有一定的了解，整體的流程是加載好阿里雲sdk -> 初始化上傳客戶端client -> 等待檔案選擇-> 檔案選擇進行上傳-> 分發上傳結果 

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

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化處理，讓同一張圖片上傳多次也只會保存一張

相關推薦：

#淺聊 上傳元件 核心架構設計

php 多檔案上傳元件_PHP教學

JS上傳元件FileUpload自訂範本的使用方法_javascript技巧

以上是vue阿里雲上傳組件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！