Skip to main content

Upload

通过点击或者拖拽上传文件。

基本用法​

可通过 width 属性控制宽度。

function App() {
  return (
    <div className="ykui-demo-column">
      <UploadList uploading={true} width={98} />
      <UploadList uploading={true} width={152} />
    </div>
  );
}

不同上传类型​

  • 通过 media 属性控制。
  • 通过 title 属性控制显示文本。
function App() {
  return (
    <div className="ykui-demo-column">
      <UploadList media="image/jpg,image/jpeg" title="上传jpg,jpeg" />
      <UploadList media="video/*" title="上传视频" />
      <UploadList media=".pptx,.doc" title="上传.pptx和.doc" width={152} />
    </div>
  );
}

不同操作类型​

可设置 type 属性，为 position 时，当在图片上 hover 时可以通过左右箭头调整图片的位置顺序；为 replace 时，可以点击已经上传的图片替换掉图片；为 preview 时，当在图片上 hover 可以点击预览图片。

function App() {
  return (
    <div className="ykui-demo-column">
      <UploadList type="position" />
      <UploadList type="replace" />
      <UploadList type="preview" />
    </div>
  );
}

限制上传个数​

通过 max 属性控制。

function App() {
  return (
    <div className="ykui-demo-column">
      <UploadList max={3} />
    </div>
  );
}

API​

属性说明类型默认值
className类名string--
style样式CSSProperties--
type类型replace〡preview〡position--
media上传类型string--
title上传文本string--
max上传个数number--
width宽度number--
height宽度number--
value当前值string--
onChange值变化时触发Func--
onPreview预览时触发Func--
upload上传接口Func--