1.安裝阿里云OSS: npm install ali-oss --save
2.新建ali-oss.js文件

// 引入ali-oss
import {
  getJsonLocal
} from './common'

import axios from "axios";
import {
  baseUrl
} from "@/api/http.js";

let OSS = require('ali-oss')
let client
export let progress // 上傳進度

function getAliToken() {
  const $aliToken = axios.create({
    withCredentials: true,
    headers: {
      "ACCESS-TOKEN": getJsonLocal("cmsToken") || "*",
    },
  });
// 后端的接口祷安，用來獲取臨時憑證
  $aliToken.get(baseUrl + "/app/ali_ststoken").then((res) => {
    if (res.status == 200) {
      /**
       *  [accessKeyId] {String}：通過阿里云控制臺創(chuàng)建的 或者 通過后端接口獲取 AccessKey。
       *  [accessKeySecret] {String}：通過阿里云控制臺創(chuàng)建的或者 通過后端接口獲取AccessSecret。
       *  [bucket] {String}：通過控制臺或PutBucket創(chuàng)建或者 通過后端接口獲取bucket。
       *  [region] {String}：bucket所在的區(qū)域索绪， 默認oss-cn-hangzhou。
       */
      client = new OSS({
        region: 'oss-cn-shenzhen',
        secure: true, // secure: 配合region使用漫雕，如果指定了secure為true柠新，則使用HTTPS訪問
        accessKeyId: res.data.AccessKeyId,
        accessKeySecret: res.data.AccessKeySecret,
        stsToken: res.data.SecurityToken,
        bucket: 'cline'
      })

    } else {
      this.$message.error("獲取阿里云臨時token失敗");
    }
  });
}
getAliToken()


/** 
 *  上傳文件，大小不能超過5GB 
 * @param {string} ObjName OSS的儲存路徑和文件名字 
 * @param {string} fileUrl 本地文件 
 * @retruns Promise 
 */
  // ObjName為文件名字,可以只寫名字射沟，就直接儲存在 bucket 的根路徑殊者，如需放在文件夾下面直接在文件名前面加上文件夾名稱    
export const put = async (ObjName, fileUrl) => {
  try {
    let result = await client.multipartUpload(`${ObjName}`, fileUrl, {
      progress: function (p) {
        progress = p * 100
      }
    })
    return result
  } catch (e) {
    console.log(e)
  }
}
// 上傳成功之后，轉(zhuǎn)換真實的地址
// 后臺只需要傳入文件名验夯，回顯時候同樣也只是返回文件名猖吴，說做數(shù)據(jù)遷移管理時候不麻煩，反正意思就是上傳出現(xiàn)問題都和他們無關(guān)挥转，so海蔽，沒辦法，所以需要自己根據(jù)返回文件名進行轉(zhuǎn)碼绑谣，生成所需要的url

export const signatureUrl = async (ObjName) => {
  try {
    let result = await client.signatureUrl(`${ObjName}`)
    return result
  } catch (e) {
    console.log(e)
  }
}

// 隨機UUID
export const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return `${+new Date()}_${rx()}${rx()}`
}

3党窜。在vue頁面中，配合element-ui的upload組件的應(yīng)用

<template>
 <el-upload
                  ref="upload"
                  action="fakeaction"
                  :http-request="uploadFunc" //用自定義上傳方法
                  :limit="1"
                  :auto-upload="true"
                  :file-list="fileList"
                  :before-upload="beforeUploadFunc"
                  :on-change="onChange"
                  :on-remove="onRemove"
                >
</template>
<script>
import { put, signatureUrl, getFileNameUUID, progress } from "@/api/ali-oss";
data () {
return {
    fileList:[],
    fileName:' ', //文件名字
    progressNum:0 // 文件上傳進度
  }
},
methods:{
   // 文件狀態(tài)改變
    onChange(file, fileList) {
      if (file) {
        this.fileList = fileList.slice(-3);
      }
    },
    // 上傳文件之前的鉤子, 參數(shù)為上傳的文件,若返回 false 或者返回 Promise 且被 reject借宵，則停止上傳
    beforeUploadFunc(file) {
      console.log(file)
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "zip") {
        this.$message.error("只能上傳后綴是.zip的文件");
        return false;
      }
      if (size > 30) {
        this.$message.error("文件大小不得超過30M");
        return false;
      }
    },
// 刪除文件
   onRemove(file, fileList) {
      this.fileList= [];
    },
  uploadFunc(param){
    let objName = getFileNameUUID();
      let obj = param.file.name;
      let index = obj.lastIndexOf(".");
      obj = obj.substring(index, obj.length);
      objName = getFileNameUUID() + param.file.name;
      put(`fileName/${objName}`, param.file).then((res) => {
        this.fileName = res.name;
        this.progressNum= progress;
      });
  }
}
</script>