Skip to main content

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) 使用。