@beisen-cmps/platform-image-uploader

    0.0.32 • Public • Published

    组件使用、扩展文档

    提交

    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回调事件
      "translation": { // 多语言参数
        "uploadText": '上传',
        "previewText": '预览'
      }
    }
    

    组件使用

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

    Install

    npm i @beisen-cmps/platform-image-uploader

    DownloadsWeekly Downloads

    1

    Version

    0.0.32

    License

    ISC

    Unpacked Size

    76.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • beisencorp