@36node/upload 中文文档教程

发布于 3年前 浏览 28 项目主页 更新于 3年前

@36node/upload

versiondownloads

上传文件到阿里云的上传组件,支持上传前裁剪,可以与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,查看这里

一些额外的选项列在

PropertyDescriptionTypeDefault
ossOptionsaws-client-s3 options, requiredobject-
cropOptionscrop option from react-image-cropobject-
maxFileSizethe max size of file list. Size unit is kb.number-
maxFileNumberthe max number of file listnumber-
valueinitial file listarray-
onChangeA callback function, can be executed when uploading state is changingFunction-
listTypeBuilt-in stylesheets, support for three types: text, picture or picture-cardString'text'
acceptFile types that can be accepted. See input accept AttributeString-
previewPreview the uploaded pictures. If preview is true, the upload component will display preview of picture.Booleantrue

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

module< /strong> © 36node,根据 MIT 许可发布。

在贡献者 (list) 的帮助下由 36node 创作和维护。

github.com/zzswang · GitHub @36node

@36node/upload

versiondownloads

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

PropertyDescriptionTypeDefault
ossOptionsaws-client-s3 options, requiredobject-
cropOptionscrop option from react-image-cropobject-
maxFileSizethe max size of file list. Size unit is kb.number-
maxFileNumberthe max number of file listnumber-
valueinitial file listarray-
onChangeA callback function, can be executed when uploading state is changingFunction-
listTypeBuilt-in stylesheets, support for three types: text, picture or picture-cardString'text'
acceptFile types that can be accepted. See input accept AttributeString-
previewPreview the uploaded pictures. If preview is true, the upload component will display preview of picture.Booleantrue

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. 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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文