@tbjy/tbdx-react-uploadimg NPM

tbdx-react-ossUploadImg

前言

基于 react ，可裁剪，支持多图的图片上传组件；可传 阿里云oss 或后端服务器

  "name": "@ali/tbdx-react-ossUploadImg", // 弹内包名
  "name": "@tbjy/tbdx-react-uploadimg", //  弹外包名

调用参考

基础调用

const ImageUploadProps = {
  fileSize: 5, // 文件大小限制（单位：M，默认：5）
  canPreview: true, // 能否预览（默认：true）
  canEdit: true, // 能否编辑（默认：true）
  canCrop: false, //  能否裁切（默认：false）
  mutiple: true, // 是否多选（默认：false）（支持多选后，canCrop会被强制为false，不支持裁剪）
  crop: {
    // 默认裁切宽高，当canCrop=true生效
    width: 200,
    height: 200,
    quality: 0.92, // 可选（0-1）：（默认：0.92。当quality!=0.92，所有图片都将采用quality压缩成jpeg格式图片；当quality=0.92，png图片不压缩，其他格式采用0.92压缩成jpeg格式图片；建议：半透明图片quality: 0.92；反之quality: 0.9）
  },
  limit: 1, // 个数控制（默认：4）
  value: [
    {
      url: "https://ossgw.alicdn.com/tblearn/question/20181022/102008/Image_a8c5fa00-d5f9-11e8-95c0-159c33bb0aaf.jpeg",
    },
    {
      url: "https://ossgw.alicdn.com/tblearn/image/tenant/banner/20180731/110020/Image_1533020385570_298.png",
      name: "Image_1533020385570_298.png",
    },
  ],
  tip: "允许上传图片的格式为jpg、jpeg、gif、bmp、png",
  tipPlacement: "bottom", // bottom||right
  onChange(value) {
    console.log(value);
  },
  accept: ["image/jpg", "image/jpeg", "image/gif", "image/bmp", "image/png"],
  url: "https://idaxue.alibaba.net/oss/getUploadToken.jhtml", // 上传前获取token的接口（serverUrl有值时，该参数无效）
  serverUrl: "", // 直接上传文件的接口（serverUrl存在时，url参数无效）
  code: "question",
};

return <ImageUpload ref={(r) => (this.playerRef = r)} {...ImageUploadProps} />;

oss 图片加密

有时候业务要求，图片私密，需要对图片进行加签处理。oss 返回的图片地址无法直接预览，在获取 token 时，需后端提供 previewUrl 参数，前端预览 previewUrl 的图片地址。

eg1：加签后端返回

{
  "code": "",
  "desc": "",
  "model": {
    "accessId": "LTAIqCoyoUZSkMRR",
    "suffixs": "jpg,jpeg,gif,bmp,png,pdf,JPG,JPEG,GIF,BMP,PNG",
    "encodedPolicy": "eyJleHBpcmF0aW9uIjoiMjAyMC0wMS0wOVQwMjo1MDowOC40NzBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMjA5NzE1MjBdLFsic3RhcnRzLXdpdGgiLCIka2V5IiwiaW1hZ2UvNTIwMDY5MDYvMTU3ODUzODE3ODQ2Ni8iXV19",
    "previewUrl": "https://tbhaoxue.oss-cn-shanghai.aliyuncs.com/image/52006906/1578538178466/Image_ad5f96e0-328a-11ea-bed0-1dfbcfaab462.jpeg?Expires=1578538208&OSSAccessKeyId=LTAIqCoyoUZSkMRR&Signature=GyosO3iK8EajAad%2FF4HJ7s0xN50%3D",
    "signature": "qtjikiWTBH2QL8pFFLOCqlcH81I=",
    "host": "https://tbhaoxue.oss-cn-shanghai.aliyuncs.com",
    "description": "image/52006906/1578538178466/",
    "expiration": "1578538208",
    "maxSize": 20971520
  },
  "msgCode": "SUCCESS",
  "msgInfo": "调用成功",
  "success": true
}

getToken

如 getToken 需要自行调用 (如 mtop)，可使用该 api，返回正确的 model 格式

getToken({file,type}) {
  return new Promise((resolve, reject) => {
    // 根据业务逻辑自行定义
    // model 格式参考上方 oss 图片加密后段加签返回
    customGetToken().then((model) => {
      resolve(model);
    }).catch(error => {
      reject(error);
    });
  });
}

render () {
  const ImageUploadProps = { ... }

  <ImageUpload ref={r => (this.playerRef = r)} {...ImageUploadProps} getToken={this.getToken} />
}

联系方式

使用有疑问或 bug，请联系

更新记录

2019 年 04 月 26 日 14:19:17

加入裁剪后压缩逻辑：非 png 格式图片或quality不为 0.92 的 png 格式，裁剪并压缩为 jpeg 格式；
更新调用 oss 接口逻辑，将裁剪和新增后的图片上传逻辑统一

2019 年 07 月 15 日 16:19:46

解决，直传服务器时，onStart 函数不生效的问题。参考 utils/uploadFileToServer.js

2019 年 08 月 26 日 16:30:33

修改裁剪框默认为全屏
修复开启裁剪后图片大小限制失效的 bug

2020 年 01 月 09 日 11:05:42

裁剪下不再提前判断选择图片大小是否超出限制，裁剪完再判断
私域图片：判断后端返回是否带有 previewUrl 字段，优先预览该字段图片地址

2020 年 05 月 11 日 14:54:51

fixed：大图预览时，右上角关闭按钮被图片覆盖的问题

2020 年 05 月 20 日 15:43:00

新添加 props: getToken，用于用户直接传入 getToken 返回的 model

2023 年 03 月 24 日 12:54:10

当不传 getToken,url,serverUrl 时，默认返回 base64 图片数据

2024 年 02 月 4 日 12:54:10 v0.0.5

支持配置 mutiple=true ，开启多文件一次性上传（强制关闭裁剪功能），考虑业务功能未必支持多文件，采用多次调用 getToken，onChange 等钩子函数实现多文件上传的功能。
getToken 钩子函数，增加返回 file，originalFile 对象
onChange 钩子函数，增加返回 size，originalName，originalSize 字段
裁剪框，支持编辑过程中自定义宽、高
新增 itemExtSlot 参数，在缩略图下增加插槽
新增 addSlot 参数，替换新增框的插槽
新增 showUploadList 参数，默认为 true，是否显示已上传的文件列表，设为 false，将不再显示缩略图
默认支持拖拽图片上传