使用方式

<link rel="stylesheet" href="/components/style/upload.css" type="text/css" />
<script defer src="/components/js/upload.js" type="text/javascript"></script>

单图上传

<div class="st_upload" st-model="imgUrl" file-size="1">
  <div class="st_upload_picture_card">
    <i class="stIconFont icon-tianjia"></i>
    <input
      type="file"
      name="file"
      class="st_upload_input"
      accept="image/jpeg, image/png, image/jpg"
    />
  </div>
</div>

多图上传

<div
  class="st_upload"
  type="multiple"
  st-model="imgList"
  change="handelImgChange"
  file-size="1"
  picture-limit="5"
>
  <div class="st_upload_picture_card">
    <i class="stIconFont icon-tianjia"></i>
    <input
      type="file"
      name="file"
      class="st_upload_input"
      accept="image/jpeg, image/png, image/jpg"
    />
  </div>
</div>

文件上传

<div class="st_upload" st-model="imgData" file-size="1" change="handleDropFile">
  <div class="st_upload_dragger">
    <i class="stIconFont icon-yunshangchuan"></i>
    <div class="st_upload_text">将文件拖到此处，或<span>点击上传</span></div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定	string	-	-
file-size	文件大小限制(单位MB)	number	-	2
type	多图上传	string	multiple	-
change	图片选择回调方法	function	-	-
picture-limit	图片数量限制	number	-	5