阿里云 oss 文件上传

const express = require('express');
const { STS } = require('ali-oss');

const router = express.Router();
require('dotenv').config();
// web上传oss，前端文档
// https://help.aliyun.com/document_detail/64056.html?spm=a2c4g.11186623.6.1462.bdd6677a5MG3yR
router.get('/sts', (req, res) => {
  const userid = req.user.id;
  const d = new Date();
  const year = d.getFullYear();
  let month = d.getMonth() + 1;
  let day = d.getDate();

  if (month < 10) {
    month = `0${month}`;
  }
  if (day < 10) {
    day = `0${day}`;
  }
  // TODO: 考虑 如果时间跨天，sts与 policy 规则是否存在冲突的问题？
  const prefix = `${userid}${year}${month}${day}`;
  const prefixToBase64 = Buffer.from(prefix).toString('base64');
  const policy = {
    Statement: [
      {
        Action: [
          'oss:GetObject',
          'oss:PutObject',
          'oss:ListParts',
          'oss:AbortMultipartUpload',
          'oss:ListObjects',
        ],
        Effect: 'Allow',
        Resource: [`acs:oss:*:*:yidiankuaile/${prefixToBase64}*`],
      },
    ],
    Version: '1',
  };

  const client = new STS({
    accessKeyId: process.env.OSS_ACCESS_KEY_ID,
    accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  });

  client
    .assumeRole(
      process.env.OSS_ROLE_ARN,
      policy,
      process.env.OSS_TOKEN_EXPIRE_TIME
    )
    .then((result) => {
      // console.log(result);
      // res.set('Access-Control-Allow-Origin', '*');
      // res.set('Access-Control-Allow-METHOD', 'GET');
      res.json({
        success: true,
        data: {
          AccessKeyId: result.credentials.AccessKeyId,
          AccessKeySecret: result.credentials.AccessKeySecret,
          SecurityToken: result.credentials.SecurityToken,
          Region: process.env.OSS_REGION,
          BucketName: process.env.OSS_BUCKET_NAME,
          FileNamePrefix: prefixToBase64,
          Expiration: result.credentials.Expiration,
        },
      });
    })
    .catch((err) => {
      res.status(400).json({
        success: false,
        message: err.message,
      });
    });
});

module.exports = router;

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"
/>

<template>
  <div>
    <div class="px-5 py-2">
      <div class="field">
        <label class="label">前缀</label>
        <div class="control">
          <input class="input" type="text" v-model="fileNamePrefix" disabled />
        </div>
      </div>
      <div class="field">
        <div class="control">
          <input class="input" type="file" ref="file" />
        </div>
      </div>
      <div class="field">
        <label class="label">文件名</label>
        <div class="control">
          <input class="input" type="text" v-model="filename" />
        </div>
      </div>
      <div class="field is-grouped">
        <div class="control">
          <button @click="upload" class="button is-primary">上传</button>
        </div>
      </div>
      <div class="field" v-show="resultUrl">
        <label class="label">上传结果</label>
        <div class="control">
          <textarea class="textarea" type="text" v-model="resultUrl" readonly />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import OSS from 'ali-oss';
  import { customAlphabet } from 'nanoid';
  import { ossSts } from '../../api/oss';

  export default {
    data() {
      return {
        stsInfo: {},
        fileNamePrefix: '',
        filename: '',
        resultUrl: '',
        suffix: '',
      };
    },
    methods: {
      getSts() {
        ossSts()
          .then((res) => {
            this.stsInfo = res.data;
            this.fileNamePrefix = res.data.FileNamePrefix;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      upload() {
        let file = this.$refs.file;
        let client = new OSS({
          region: this.stsInfo.Region,
          accessKeyId: this.stsInfo.AccessKeyId,
          accessKeySecret: this.stsInfo.AccessKeySecret,
          stsToken: this.stsInfo.SecurityToken,
          bucket: this.stsInfo.BucketName,
        });

        // 支持File对象、Blob数据以及OSS Buffer。
        // const data = file;
        const data = file.files[0];
        // or const data = new Blob('content');
        // or const data = new OSS.Buffer('content'));

        let arr = data.name.split('.');
        this.suffix = arr[arr.length - 1];

        let putObject = async () => {
          try {
            let result = await client.put(
              this.fileNamePrefix + '/' + this.filename + '.' + this.suffix,
              data
            );
            this.resultUrl = result.url;
          } catch (e) {
            console.log(e);
          }
        };
        putObject();
      },
    },
    created() {
      const nanoid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 6);
      this.filename = nanoid();
      this.getSts();
    },
  };
</script>