对接阿里云-OSS,可通过环境变量配置 OSS 信息,可自定义域名,支持多选、限制文件大小、删除、粘贴上传功能,拖拽上传功能,让上传功能更加简单
- 纯前端实现,不需要后台配合
- 只需配置 OSS 的基本信息,即可实现上传功能
- 上传前自动压缩图片,上传过程中有 loading 提示,支持图片显示及删除
- 可拓展自定义 loading 和默认上传样式
- 可限制上传文件大小和上传文件数量
- 可截图粘贴上传
- 可拖拽上传
- 可预览图片
yarn add @femessage/upload-to-ali
使用时组件以下四个参数必传:
accessKeyId
- 阿里云控制台创建的access key
accessKeySecret
- 阿里云控制台创建的access secret
bucket
- 存储空间的名字
region
- 根据 存储空间 所在的存储区域, 相应的上传域名
推荐使用环境变量配置 OSS 参数
使用 dotenv,我们只需要将环境变量配置写在.env
文件中,配合 CI 工具,可满足同一套代码在不同环境对接不同 OSS 的需求
以下是所有可传入的环境变量
# .env文件
# OSS上传设置
# 对应组件必要参数 accessKeyId
OSS_KEY=xxx
# 对应组件必要参数 accessKeySecret
OSS_SECRET=xxx
# 对应组件必要参数 bucket
OSS_BUCKET=your-bucket
# 对应组件必要参数 region
OSS_REGION=oss-cn-beijing
# 对应组件可选参数 dir
OSS_DIR=oss-dir
# 对应组件可选参数 customDomain
OSS_CUSTOM_DOMAIN=cdn.xxx.com
dotenv
文档参考 https://www.npmjs.com/package/dotenv
Thanks goes to these wonderful people (emoji key):
levy 💻 👀 🚇 📝 🤔 | Alvin 💻 👀 | listars 💻 👀 📖 | EVILLT 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!