@36node/upload 中文文档教程
@36node/upload
上传文件到阿里云的上传组件,支持上传前裁剪,可以与antd form集成
Install
yarn add @36node/upload antd ali-oss
Usage
Simple
import Upload from "@36node/upload";
import "@36node/upload/dist/index.css";
const ossOptions = {
endpoint: '<oss endpoint>',
credentials: {
accessKeyId: '<Your accessKeyId>',
secretAccessKey: '<Your secretAccessKey>',
}
region: '<oss region>',
bucket: '<Your bucket name>',
url: '<oss prefix>'
}
<Upload ossOptions={ossOptions}>
<Button>upload</Button>
</Upload>
Integrate With Form
<Form>
<Form.Item>
{getFieldDecorator("upload", {
initialValue: [
{
uid: Date.now(),
status: "done",
name: "logo",
url: "./images/logo.png",
},
],
})(
<Upload ossOptions={ossOptions}>
<Button>upload</Button>
</Upload>
)}
</Form.Item>
</Form>
Crop Before Upload
检查所有裁剪选项此处
const cropOptions = {
crop: {
unit: "%",
width: 100,
aspect: 1,
},
};
<Upload ossOptions={ossOptions} cropOptions={cropOptions}>
<Button>upload</Button>
</Upload>;
查看完整示例此处
API
@36node/upload基于antd upload,它支持所有antd upload api,查看这里
一些额外的选项列在
Property | Description | Type | Default |
---|---|---|---|
ossOptions | aws-client-s3 options, required | object | - |
cropOptions | crop option from react-image-crop | object | - |
maxFileSize | the max size of file list. Size unit is kb. | number | - |
maxFileNumber | the max number of file list | number | - |
value | initial file list | array | - |
onChange | A callback function, can be executed when uploading state is changing | Function | - |
listType | Built-in stylesheets, support for three types: text, picture or picture-card | String | 'text' |
accept | File types that can be accepted. See input accept Attribute | String | - |
preview | Preview the uploaded pictures. If preview is true, the upload component will display preview of picture. | Boolean | true |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
module< /strong> © 36node,根据 MIT 许可发布。
在贡献者 (list) 的帮助下由 36node 创作和维护。
github.com/zzswang · GitHub @36node
@36node/upload
a upload component that upload file to aliyun, support crop before upload and can integrate with antd form
Install
yarn add @36node/upload antd ali-oss
Usage
Simple
import Upload from "@36node/upload";
import "@36node/upload/dist/index.css";
const ossOptions = {
endpoint: '<oss endpoint>',
credentials: {
accessKeyId: '<Your accessKeyId>',
secretAccessKey: '<Your secretAccessKey>',
}
region: '<oss region>',
bucket: '<Your bucket name>',
url: '<oss prefix>'
}
<Upload ossOptions={ossOptions}>
<Button>upload</Button>
</Upload>
Integrate With Form
<Form>
<Form.Item>
{getFieldDecorator("upload", {
initialValue: [
{
uid: Date.now(),
status: "done",
name: "logo",
url: "./images/logo.png",
},
],
})(
<Upload ossOptions={ossOptions}>
<Button>upload</Button>
</Upload>
)}
</Form.Item>
</Form>
Crop Before Upload
check all crop options here
const cropOptions = {
crop: {
unit: "%",
width: 100,
aspect: 1,
},
};
<Upload ossOptions={ossOptions} cropOptions={cropOptions}>
<Button>upload</Button>
</Upload>;
check full examples here
API
@36node/upload is base on antd upload, it supports all antd upload api, check it here
some extra options are list below
Property | Description | Type | Default |
---|---|---|---|
ossOptions | aws-client-s3 options, required | object | - |
cropOptions | crop option from react-image-crop | object | - |
maxFileSize | the max size of file list. Size unit is kb. | number | - |
maxFileNumber | the max number of file list | number | - |
value | initial file list | array | - |
onChange | A callback function, can be executed when uploading state is changing | Function | - |
listType | Built-in stylesheets, support for three types: text, picture or picture-card | String | 'text' |
accept | File types that can be accepted. See input accept Attribute | String | - |
preview | Preview the uploaded pictures. If preview is true, the upload component will display preview of picture. | Boolean | true |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
module © 36node, Released under the MIT License.
Authored and maintained by 36node with help from contributors (list).
github.com/zzswang · GitHub @36node