编写一个oss.js 文件

import OSS from "ali-oss";
import request from "@/utils/request";

export const getStsToken = async() => {
  let info;
  await request.get("****/****/getToken").then(r => {
    info = r.data;
  });
  return {
    accessKeyId: info.data.accessKeyId,
    accessKeySecret: info.data.accessKeySecret,
    stsToken: info.data.securityToken,
    expiration: info.data.expiration
  };
};
export const getClient = (accessKeyId, accessKeySecret, stsToken) => {
  return new OSS({
    region: "oss-****",
    accessKeyId,
    accessKeySecret,
    stsToken,
    bucket: "****-******",
    timeout: 300000 // 5分钟
  });
};
/**
 * 判断临时凭证是否到期。
 **/
export const isCredentialsExpired = credentials => {
  if (!credentials) {
    return true;
  }
  const expireDate = new Date(credentials.expiration);
  const now = new Date(); // 如果有效期不足一分钟，视为过期。
  return expireDate.getTime() - now.getTime() <= 60000;
};

页面开发

页面导入oss代码

import {
  getClient,
  getStsToken,
  isCredentialsExpired
} from "@/utils/oss.js";

Element 文件上传

        <el-form-item prop="fileUrl" label="上传APK">
          <el-upload
            name="file"
            :headers="getToken()"
            action=""
            :disabled="uploadLoading"
            :auto-upload="false"
            :show-file-list="false"
            :on-success="
              (res, file) => {
                handleImportSuccess(res, file, 'fileUrl');
              }
            "
            :on-change="
              (file, fileList) => {
                beforeAvatarUpload(file, fileList, 50);
              }
            "
            :on-error="errHandle"
            accept=".apk"
            class="avatar-uploader"
            style="margin-right:15px"
          >
            <el-button
              type="primary"
              :loading="uploadLoading"
              :disabled="uploadLoading"
            >上传</el-button> </el-upload><span
            v-if="fileName"
          >{{ fileName }} --- 上传进度:
            <span
              :style="progress == 100 ? 'color:green' : 'color:red'"
            >{{ progress }}%</span></span>
        </el-form-item>

生成uuid

    uuid(length = 32) {
      const num =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
      let str = "";
      for (let i = 0; i < length; i++) {
        str += num.charAt(Math.floor(Math.random() * num.length));
      }
      return str;
    },

on-change 文件上传

    async beforeAvatarUpload(file, fileList, FileSize = 50) {
      console.log(6666666666, file, fileList, FileSize);
      console.log(file.size, 1024 * FileSize);
      const isJPG = [
        ".apx",
        "application/vnd.android.package-archive"
      ].includes(file.raw.type);
      const isLt2M = file.size > 1024 * FileSize;
      console.log(isJPG);
      if (!isJPG) {
        this.$message.error("上传文件格式为 excel!");
        fileList.splice(fileList.indexOf(file), 1);
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      console.log(isJPG, isLt2M);

      this.progress = 0;
      this.uploadLoading = true;
      try {
        this.credentials = db.get("credentials");
        if (
          !this.credentials.accessKeyId ||
          isCredentialsExpired(this.credentials)
        ) {
          this.credentials = await getStsToken();
          db.save("credentials", this.credentials);
        }
        this.client = await getClient(
          this.credentials.accessKeyId,
          this.credentials.accessKeySecret,
          this.credentials.stsToken
        );
        this.fileName = file.name;
        const splitName = file.name.split(".");
        const url = `/${this.uuid()}.${splitName[splitName.length - 1]}`;
       
        const _this = this;
        const r1 = await this.client.multipartUpload(url, file.raw, {
          progress: function(percent) {
            console.log("percent", percent);
            _this.progress = Math.ceil(percent * 100);
          }
        });
        console.log("put success:", r1);
        file.url = `https://fffff.*****.aaaaaa${url}`;
        this.form.fileUrl = file.url;
        this.$message({
          type: "success",
          message: "上传成功"
        });
        this.uploadLoading = false;
      } catch (error) {
        console.error(error);
        fileList.splice(fileList.indexOf(file), 1);
      }
    },