使用JavaScript簽名后直傳

vue安裝ali-oss： npm install ali-oss --save

vue中創(chuàng)建相應(yīng)文件
1懈万、scr下新建utils文件夾
2衷佃、在utils文件夾中新建index.js文件，存放獲取阿里stsToken方法和上傳方法 getAliToken()和ossUpload()
3、在utils文件夾中新建client.js文件，配置OSS參數(shù)信息
4螟凭、組件中新建upload.vue文件

//index.js
import Client from "./client";
import { getStsInfo } from 'api' //獲取后臺(tái)返回sts信息

export const getAliToken = (that) => {
  //獲取Token
  return new Promise((resolve, reject) => {
    getStsInfo().then((res) => {
      console.log("res :>> ", res);
      if (res.stateCode === 0) {
        const {
          AccessKeyId,
          AccessKeySecret,
          bucketName,
          Token,
          video,
          pic,
        } = res;
        //后臺(tái)返回的存放路徑
        that.videoOssAddress = video;
        that.imgOssAddress = pic;
        // this.expiration = expiration;
        that.dataObj = {
          region: that.region,
          bucket: bucketName,
          accessKeyId: AccessKeyId,
          accessKeySecret: AccessKeySecret,
          stsToken: Token,
        };
        resolve(res);
      } else {
        reject(false);
      }
    })
      .catch((err) => {
        console.log(err);
      });
  })

};

// 上傳視頻 oss直傳
export const ossUpload = async (option, dataObj, route, callback) => {
  const client = Client(dataObj),
    file = option.file;
  //隨機(jī)命名
  const random_name =
    random_string(6) +
    "_" +
    new Date().getTime() +
    "." +
    file.name.split(".").pop();

  //上傳失敗的話 可以放開(kāi)下方注釋代碼 試試
  //client.options.endpoint.protocol = "https:";

  // 分片上傳文件
  await client
    .multipartUpload(`/${route}/${random_name}`, file, {
      progress: async function (p) {
        let e = {};
        e.percent = p * 100;
        option.onProgress(e);
      },
    })
    .then((res) => {
      console.log(res);
      callback(res)
    })
}

// 隨機(jī)生成文件名
export const random_string = (len) => {
  len = len || 8;
  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678",
    maxPos = chars.length,
    pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
};

//client.js
const OSS = require('ali-oss');
 
export default function Client(data) {
    //后端提供數(shù)據(jù)
    return new OSS({
        region: data.region,  //oss-cn-beijing
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        stsToken: data.stsToken,
        bucket: data.bucket
    })
}

//upload.vue
<template>
  <div>
    <el-upload
       :show-file-list="false"
       class="upload-demo"
       action="action"
       :before-upload="beforeUpload"
       :http-request="handleHttpRequest"
 >
     <el-button size="small" type="primary">選擇文件</el-button>
    </el-upload>
  </div>
</template>

<script>
  import { getAliToken, ossUpload } from "utils";

export default {
  data() {
    return {
      //上傳oss
      region: "oss-cn-beijing",
      dataObj: {},
      videoOssAddress: "",
      imgOssAddress: "",
      url: ""
    }
  },
  methods: {
    // 上傳之前獲取sts 虛擬授權(quán)
    beforeUpload(file) {
      let that = this;
      return new Promise((resolve, reject) => {
        // 獲取sts 的 token
        getAliToken(that)
          .then((response) => {
            if (response) {
              resolve(response);
            } else {
              reject(response);
            }
          })
          .catch((err) => {
            console.log(err);
            reject(err);
          });
      });
    },
    async handleHttpRequest(option) {
      console.log("option :>> ", option);

      const { type } = this;
      let loading = null;
      loading = this.$loading({
        lock: true,
        text: "上傳中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      //上傳OSS
      try {
          let size = (option.file.size / this.pow1024(2)).toFixed(2); //上傳文件的大小  MB
          if (parseFloat(size) > 300) {
            this.$message.error("上傳視頻超過(guò)限制,請(qǐng)上傳300MB以?xún)?nèi)的視頻");
            return;
          }
          // 上傳視頻    this.dataObj為new OSS實(shí)例化的參數(shù)，上傳的oss路徑拼接this.videoOssAddress
          await ossUpload(option, this.dataObj, this.videoOssAddress, (res) => {
            console.log("res :>> ", res);
            const {
              res: { statusCode, requestUrls },
            } = res; //返回狀態(tài)和 url
            if (statusCode == 200) {
              let url = requestUrls[0].split("?")[0];
              this.$message.success("上傳成功!");
              loading.close();
              this.url = url;
            } else {
              loading.close();
            }
          });
      } catch (error) {
        console.log('error :>> ', error);
        loading.close();
      }
    },
    pow1024(num) {
      return Math.pow(1024, num);
    },
  }
}
</script>

搞定 至此上傳完成它呀！