Aller au contenu principal
Version: 2.0.0

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