OSS 文件上传

由于函数网关的问题，文件无法直传至函数，但我们也提供了两种方式来解决文件上传的问题。

【推荐】后端生成加密地址，前端上传

OSS 上传目前采用阿里云提供的开源包「ali-oss」，npm 包地址：https://www.npmjs.com/package/ali-oss

安装

安装依赖

npm i ali-oss -S && npm i @types/ali-oss -D

阿里云 OSS 配置

客户端进行表单直传到 OSS 时，会从浏览器向 OSS 发送带有Origin的请求消息。OSS 对带有Origin头的请求消息会进行跨域规则（CORS）的验证，因此需要为 Bucket 设置跨域规则以支持 Post 方法

1. 登录OSS 管理控制台。
2. 单击Bucket 列表，之后单击目标 Bucket 名称。
3. 单击权限管理 > 跨域设置，在跨域设置区域单击设置。
4. 单击创建规则，配置如下图所示。

[

](https://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/zh-CN/1152398851/p12308.png)

后端代码

// src/apis/lambda/index.ts
/**
 *
 * @param params Object {filename: 编码后文件名称}
 */
export async function getOSSUploadUrl(params: { filename: string }) {
  const { filename } = params;
  const dir = 'user-dir-prefix/'; // OSS 文件根目录

  const client = new OSS({
    region: '<oss region>', // 这里需要修改成你自己的 region
    accessKeyId: '<Your accessKeyId>', // 这里需要修改成你自己的 accessKeyId
    accessKeySecret: '<Your accessKeySecret>', // 这里需要修改成你自己的 accessKeySecret
    bucket: '<Your bucket name>', // 这里需要修改成你自己的 bucket
    secure: true,
  });

  const url = client.signatureUrl(dir + decodeURIComponent(filename), {
    method: 'PUT',
    'Content-Type': 'application/octet-stream',
  });

  return url;
}

前端代码

import React, { useEffect, useState } from 'react';
import { getOSSUploadUrl } from '../../apis/lambda';

export default () => {
  const [message, setMessage] = useState('');
  useEffect(() => {}, []);

  const uploadPhoto = (e: any) => {
    const file = e.target.files[0];
    const filename = encodeURIComponent(file.name);

    getOSSUploadUrl({ filename }).then((url) => {
      const contentType = 'application/octet-stream';
      const body = new Blob([file], { type: contentType });

      fetch(url, {
        method: 'PUT',
        headers: new Headers({ 'Content-Type': contentType }),
        body,
      })
        .then((res) => {
          setMessage(`上传成功！文件路径：${url.substring(0, url.indexOf('?'))}`);
        })
        .catch((e) => {
          console.log(e);
        });
    });
  };

  return (
    <div className="common-container">
      <>
        <p>上传文件，可以在accept属性中控制想要传的文件类型</p>
        <input onChange={uploadPhoto} type="file" accept="*" />
      </>
      <p>{message}</p>
    </div>
  );
};

注意事项

获取上传文件地址的时候有很多的权限设置可以在 阿里云的 OSS 控制台设置，如果返回的 url 在页面中打不开，那么需要在 OSS 控制台授权

前端 OSS SDK 直传

小文件（大小 < 3m）可通过编码至 base64 上传，大文件请采用前端 OSS 的方式上传。参考文档：OSS Browser.js SDK

前端 OSS SDK 可能会有泄露 access key 与 sercet key 的问题，推荐配合 阿里云临时安全令牌（Security Token Service，STS） 使用。