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 parametersWith 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):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

⬆ Back to Top