上传图片

图片上传控件

代码演示

基本使用

import { useState } from 'react';
import UploadImg from '../../components/UploadImg';

fucntion Card({ confData, dispatch }) {

  return (
    <UploadImg
      imgList={confData.data.imgM}
      note='提示文本'
      pure={false}
      onChange={(img) =>
        dispatch({
          type: 'UPDATE_MODULE',
          payload(draft: any) {
            draft.data.imgM = img;
          },
        })
      }
    />
  );
}

进阶使用

UploadImgWrap 组件配置 keyName 与 dispatch 后，组件会自动将数据同步到魔方编辑器的 store 中

import { UploadImgWrap } from '../../components/UploadImg';

fucntion Card({ confData, dispatch }) {

  return (
    <UploadImgWrap
      img={confData.data.imgM}
      valueType='auto'
      keyName="data.imgM"
      dispatch={dispatch}
      note="建议压缩图片后上传"
    />
  );
}

API

UploadImg 组件接受的参数如下：

参数	类型	说明	默认值
className	string	容器类名	-
imgList	TImg[]	图片列表	-
note	string	提示文本	''
pure	boolean	纯净模式	false
onChange	(img: TImg[]) => void	图片上传回调	-

UploadImgWrap 组件接受的参数如下：

参数	类型	说明	默认值
className	string	容器类名	-
img	TImg[]	string	图片列表	-
valueType	'auto' | 'string' | 'array'	用于配置上传后设置到 store 的数据类型	'auto'
note	string	提示文本	''
pure	boolean	纯净模式	false
keyName	string	store 数据存储路径	-
dispatch	(action: { type: string, payload: any }) => void	store 数据更新方法	-

TImg 类型定义

type TImg = {
  url: string;
  uid?: string;
  name?: string;
  status?: 'done' | 'uploading' | 'error';
  width?: number;
  height?: number;
};

FAQ

什么是纯净模式 ？

纯净模式下，组件会隐藏 note 提示文案、在线设计入口，只会提供上传图片的功能。

为什么要使用 UploadImgWrap 组件？

阅读链接