VUE + Element-UI 上傳到阿里雲OSS

什麼是OSS？

首先看一下官網的說明。我是官網文檔連接

阿里雲對象存儲服務（Object Storage Service，簡稱 OSS），是阿里雲提供的海量、安全、低成本、高可靠的雲存儲服務。其數據設計持久性不低於 99.999999999%，服務設計可用性不低於 99.99%。OSS 具備不受平臺限制的 RESTful API 接口，您能夠在任何應用、任什麼時候間、任何地點存儲和訪問任意類型的數據。

您能夠使用阿里雲提供的 API、SDK 接口或者 OSS 遷移工具輕鬆地將海量數據移入或移出阿里雲 OSS。數據存儲到阿里雲 OSS 之後，您能夠選擇標準類型（Standard）的阿里雲 OSS 服務做爲移動應用、大型網站、圖片分享或熱點音視頻的主要存儲方式，也能夠選擇成本更低、存儲期限更長的低頻訪問類型（Infrequent Access）和歸檔類型（Archive）的阿里雲 OSS 服務做爲不常常訪問數據的備份和歸檔。

簡單理解，就是一個大型的Object

{
    parent
    {
        children
    }
}
複製代碼

怎麼使用？

官網提供了多種語言版本的SDK示例，我這裏使用的是Node版本的。

1. 使用 NPM 安裝ali-oss

   Node.js >= 8.0.0 若是須要在 Node.js < 8 的環境中使用，請使用 ali-oss 4.x版本。

npm install ali-oss
複製代碼

2. 建立實例，OSS NodeJS SDK同時支持同步和異步的使用方式

• 同步方式：基於async和await方式，異步編程同步化
• 異步方式：相似callback的方式，API接口返回Promise，使用.then()處理返回結果，使用.catch()處理錯誤

ali-oss.js

// 引入ali-oss
let OSS = require('ali-oss')

/**
 *  [accessKeyId] {String}：經過阿里雲控制檯建立的AccessKey。
 *  [accessKeySecret] {String}：經過阿里雲控制檯建立的AccessSecret。
 *  [bucket] {String}：經過控制檯或PutBucket建立的bucket。
 *  [region] {String}：bucket所在的區域， 默認oss-cn-hangzhou。
 */
let client = new OSS({
   region: '<oss region>',
  //雲帳號AccessKey有全部API訪問權限，建議遵循阿里雲安全最佳實踐，部署在服務端使用RAM子帳號或STS，部署在客戶端使用STS。
  accessKeyId: '<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket name>'
})

複製代碼

3. 調用API的方法

ali-oss.js

/**
 *  上傳文件，大小不能超過5GB
 * @param {string} ObjName OSS的儲存路徑和文件名字
 * @param {string} fileUrl 本地文件
 *
 * @retruns Promise
 */
export const put = async (ObjName, fileUrl) => {
  try {
    let result = await client.put(`AAA/${ObjName}`, fileUrl)
    // AAA爲文件夾， ObjName爲文件名字,能夠只寫名字，就直接儲存在 bucket 的根路徑
    console.log(result)
    return result
  } catch (e) {
    console.log(e)
  }
}
複製代碼

官網方法示例點這裏

使用Element-UI的 Upload 組件封裝上傳

Element-UI的 Upload 組件有一個 http-request 配置，能夠自定義上傳方法，覆蓋默認的。

直接貼代碼

<template>
  <div class="hello">
    <el-upload
      class="upload-demo"
      action
      :http-request="handleUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-remove="beforeRemove"
      multiple
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :list-type="listType"
    >
      <el-button size="small" type="primary">點擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
import { put, getFileNameUUID } from '@/utils/ali-oss'

export default {
  name: 'Upload',
  props: {
    tip: {
      type: String,
      default: '上傳大小不能超過80M'
    },
    limit: {
      type: Number,
      default: 1
    },
    action: {
      type: String,
      default: ''
    },
    headers: {
      type: Object,
      default: () => {}
    },
    name: {
      type: String,
      default: ''
    },
    listType: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.$emit('on-remove', file, fileList)
    },
    handlePreview(file) {
      this.$emit('on-preview', file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上傳 ${this.limit} 個文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`肯定移除 ${file.name}？`)
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList
      this.$emit('on-success', file, fileList)
    },
    /**
     * 自定義上傳方法
     */
    handleUpload(option) {
        // 生成的文件名稱
      let objName = getFileNameUUID()
      
      // 調用 ali-oss 中的方法
      put(`aaaaaa${objName}`, option.file).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

複製代碼

提交到後臺保存文件地址

上傳到阿里雲OSS成功後，會返回文件的地址，提交給後臺保存地址就能夠了。

UUID的生成算法有多種多樣，這裏把我用的貼出來，僅供參考

/** * 生成隨機文件名稱 * 規則八位隨機字符，加下劃線鏈接時間戳 */
export const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return `${+new Date()}_${rx()}${rx()}`
}
複製代碼