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

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

2019 年 07 月 15 日 16:19:46

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

2019 年 08 月 26 日 16:30:33

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

2020 年 01 月 09 日 11:05:42

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

2020 年 05 月 11 日 14:54:51

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

2020 年 05 月 20 日 15:43:00

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

2023 年 03 月 24 日 12:54:10

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

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

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

2024年05月24日10:09:24 v0.0.6

1. 修复裁剪时，修改裁剪框大小，裁剪后图片大小不生效的问题
2. 输入裁剪尺寸时，失焦才触发，最大、最小值的限制