upload-to-ali
upload-to-ali copied to clipboard
☁️Upload to ali-oss easily
upload-to-ali
In the beginning, this component is designed to upload file to Aliyun-OSS easily,but now it can upload to any oss as you wish.
You can configure OSS information through environmental variables, customize domain, support multi-selection, limit file size, delete, paste to upload, drag and drop to upload, make files upload simpler.

中文文档
Table of Contents
- Feature
- Links
- Install
- Config
- Dotenv
- Contributing
- Contributors
- License
Feature
- The upload function can be done with little oss configuration
- Automatically compress pictures before uploading, and loading prompts during uploading, support picture display and deletion
- With default styles and support customize
- Can limit the size or the number of files to upload
- Support paste screenshot to upload
- Can drag and drop to upload
- Can preivew img
- support v-model
You can only set action props, that refers to upload url, the component has a default implement to post data to the url.
You can set request props to customize own upload function.
⬆Back to Top
Links
- docs
- ali oss guide
⬆ Back to Top
Install
yarn add @femessage/upload-to-ali
⬆Back to Top
Dotenv
Recommend using environment variables to configure upload parameters
With dotenv, we just need to write the environment variable in .env. With CI tools, this can meet the needs of using different configuration in different environments without change the source code.
Here are all can passed-in environment variables
# .env file
# these params are all optional
UPLOAD_ACTION=upload-url
OSS_BUCKET=your-bucket
OSS_REGION=oss-cn-beijing
OSS_DIR=oss-dir
OSS_CUSTOM_DOMAIN=cdn.xxx.com
dotenv document reference https://www.npmjs.com/package/dotenv
vue-cli3
vue-cli3 offers an easy solution to replace process.env, but it requires a pattern(VUEAPP*) to inject in client side. So we need to use dotenv-webpack's solution.
// vue.config.js
const Dotenv = require('dotenv-webpack')
module.exports = {
configureWebpack: {
plugins: [new Dotenv()]
}
}
⬆Back to Top
Contributing
For those who are interested in contributing to this project, such as:
- report a bug
- request new feature
- fix a bug
- implement a new feature
Please refer to our contributing guide.
⬆ Back to Top
Contributors
Thanks goes to these wonderful people (emoji key):
levy 💻 👀 🚇 📝 🤔 |
Alvin 💻 👀 |
listars 💻 👀 📖 |
EVILLT 💻 📖 |
Donald Shen 💻 📖 ⚠️ |
OuZuYu 🐛 |
轻剑快马 📖 |
ColMugX 🐛 |
Rexer Wang 🐛 |
cjf 💻 📖 |
Django.Tung 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT
⬆ Back to Top