# @beisen-platform/platform-image-uploader

> ## 提交

Latest version **1.0.13-rc.3** (published 2019-08-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/platform-image-uploader
pnpm add @beisen-platform/platform-image-uploader
yarn add @beisen-platform/platform-image-uploader
bun add @beisen-platform/platform-image-uploader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13-rc.3 |
| Published | 2019-08-07 |
| First published | 2018-12-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/platform-image-uploader
- Repository: git@gitlab.beisencorp.com:ux-share-platform/ux-platform-image-uploader
- npm.io page: https://npm.io/package/@beisen-platform/platform-image-uploader

## Recent versions

- 1.0.13-rc.3 (latest) — 2019-08-07
- 1.0.13-rc.2 — 2019-08-06
- 1.0.13-rc.1 — 2019-04-29
- 1.0.13 — 2019-04-15
- 1.0.10 — 2019-04-10
- 1.0.9 — 2019-03-15
- 1.0.8 — 2019-03-06
- 1.0.6 — 2019-02-18
- 1.0.4 — 2019-01-18
- 1.0.3 — 2019-01-06
- 1.0.2 — 2019-01-04
- 1.0.1 — 2019-01-04
- 1.0.0 — 2018-12-14
- 0.0.14 — 2018-12-07
- 0.0.13 — 2018-12-02

## README

## 组件使用、扩展文档

## 提交

1. npm install
2. 修改代码后执行 npm run lib进行编译
3. 更新package.json中的 version版本号
4. push代码
5. 在cmp.beisen.io站点，头部导航的《服务》中查看编译是否通过

## 使用参数

```
{
  text: this.props.text || '',   // 'example.png'
  value: this.props.value || '',  // 'dfs://BeisenCloudDemo2File/100013/1534405873/633d817aa4504d6b97c9377fd569fca1.png'
  "cmp_id": "ddf29911-5d78-4f21-b2f8-bbac40e47ba9",
  "cmp_name": "BeisenCloudDemotilamisu_duowenjianshangchuandev",
  "cmp_type": "BC_PictureUploader",
  "cmp_label": "多图片上传(dev)",
  "cmp_data": {
      "AllowSearchNull":"0",
      "title": "多图片上传(dev)",
      "field_name": "wenjianuploaddev",
      "field_name_for_multi": "",
      "required": false,   //必填
      "cmp_state": "create",
      "cmp_status": "editable",
      "editdisplaystate": "editable",
      "createdisplaystate": "editable",
      "showdisplaystate": "readonly",
      "datasourcename": "NativePlace",
      "metaObjectName":"BeisenCloudDemo.pigloseweight",
      "dataType": "Text",
      "tip":"测试",    //右侧提示文字
      "desc":"问号说明",  //帮助问号的文字说明
      "type": "image",  //类型
      "uploadCount": 9,  // 文件上传总数
      "multiple": true, /多选上传，单选上传
      "accept": "image/JPG, image/png, image/jpeg, image/bmp, image/gif, image/tif", //可以上传的图片
  },
  "search_data": {
    metaFieldRelationIDPath: null,
    metaobjectname: "BeisenCloudDemo.pigloseweight",
    opeartor: "eq",
    seperator: "-"
  },
  "downloadUrl": "//dfiles.italent.link/download/BeisenCloudDemo2File/100013/1534405873/633d817aa4504d6b97c9377fd569fca1.png",
  "clientUrl": "//dfiles.italent.link/BeisenCloudDemo2File/100013/1534405873/633d817aa4504d6b97c9377fd569fca1.png",
  "biz_data": { "text": "" },
  "validators": {},
  "BSGlobal": window.BSGlobal,  //内部需要获取页面信息，如origin等
  "uploadOrigin": "",  //自定义origin
  "containerContext": {
    actions: {
      changeUploadState(cmp_id, message, error) => {} //上传状态回调，失败或成功
    }
  }
  onPreviewImg: (url) => {},  //外部自定义预览方式，组件内部在新窗口预览文件
  onChange: (val) => {
    const {text, value, ClientUrl, DownLoadUrl} = val
  },  //onchange回调事件
}
```

## 组件使用

1. npm install @beisen-cmps/platform-image-uploader
3. 该组件有两种使用方式, 第一种会走组件内部的获取数据方式,数据会存在state里，第二种会走外部传入的action
  1. import XXX from '@beisen-cmps/platform-image-uploader'
  2. import {ImageUploader} from '@beisen-cmps/platform-image-uploader'
3. 组件内部渲染数据取决于外部传值，如果上传后删除，需要外部方法处理text和value值在传回给组件才能正常显示

```
render() {
  return <ImageUploader {...this.props}/>;
}
```

---
_Source: https://npm.io/package/@beisen-platform/platform-image-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._