OSS直通车：Nestjs+Vue轻松实现阿里云OSS服务端签名直传

前端

2023-07-15 02:04:49

阿里云 OSS 服务端签名直传：安全且便捷的文件上传指南

文件上传 是软件开发中至关重要的环节，而选择合适的云存储服务至关重要。阿里云 OSS 作为国内领先的云计算提供商，深受广大开发者的青睐。

服务端签名直传 是 OSS 提供的一种安全且便捷的文件上传方案，它允许用户直接将文件上传到 OSS，而无需暴露 OSS 的访问密钥。这种方式既保障了文件的安全，又简化了用户的文件上传流程。

服务端签名直传的工作原理

服务端签名直传的工作原理如下：

服务器端生成上传凭证： 服务器使用阿里云 OSS SDK 生成一个包含上传策略和签名的上传凭证。
返回上传凭证给客户端： 服务器将上传凭证返回给客户端，通常是通过 HTTP 请求或 WebSocket 等方式。
客户端使用上传凭证上传文件： 客户端使用上传凭证通过 HTTP POST 请求将文件上传到指定的 OSS Bucket 中。

生成上传凭证

在 Nestjs 项目中，可以使用 @nestjs/oss 库生成上传凭证：

import { Injectable } from '@nestjs/common';
import { OssService } from '@nestjs/oss';

@Injectable()
export class AppService {
  constructor(private readonly ossService: OssService) {}

  async generatePresignedUrl(fileName: string): Promise<string> {
    const policy = {
      expiration: '2023-01-01T12:00:00.000Z',
      conditions: [
        { bucket: 'my-bucket' },
        { key: fileName },
      ],
    };

    const url = await this.ossService.generatePresignedUrl('putObject', policy);
    return url;
  }
}

使用上传凭证上传文件

在 Vue 项目中，可以使用 vue-oss-uploader 库上传文件：

import Vue from 'vue';
import VueOssUploader from 'vue-oss-uploader';

Vue.use(VueOssUploader, {
  region: 'oss-cn-beijing',
  accessKeyId: 'my-access-key-id',
  accessKeySecret: 'my-access-key-secret',
  bucket: 'my-bucket',
});

export default {
  methods: {
    uploadFile(file) {
      const uploader = new VueOssUploader();
      uploader.addFile(file);
      uploader.start();
    },
  },
};