WARNING

清除的toast提示效果，和图片预览效果，请在手机模拟器模式查看该功能

uploader props

属性	描述	类型	默认值
accept	input的accept属性（accept的属性值）	string	image/*
fileList	文件列表	array	[]
valueKey	上传图片地址的key	string	url
uploadStyle	上传区域的样式	object	-
showUploaderList	是否展示上传列表	boolean	true
showImageType	图片展示样式类型	string	contain
showImageSize	图片展示大小	number	80
loadingSize	loading大小	number	20
statusIconSize	状态icon大小	number	20
deleteIconSize	删除icon大小	number	20
previewImage	是否预览图片	boolean	true
multiple	是否开启多张上传	boolean	false
disabled	是否禁用	boolean	false
showUpload	是否显示上传区域	boolean	true
deletable	是否允许清除上传列表	boolean	true
maxSize	是否最大上传文件大小	number	Infinity
maxCount	是否最大上传文件数量	number	Infinity
uploadText	上传区域的文案	string	上传图片
uploadIcon	上传区域的icon	string	camera
resultType	上传文件的读取类型（'file', 'text', 'dataUrl'）	string	dataUrl
beforeRead	文件读取前的处理函数，当返回false，将停止上传，支持promise	function	-
beforeDelete	文件列表删除前的处理函数，当返回false，将停止删除，支持promise	function	-
afterRead	文件读取后的处理函数	function	-

fileList 属性

属性	描述	类型
url	图片的默认地址，可通过valuekey设置	string
type	如果为‘uploader’表示为本地上传的图片	string
status	上传图片的状态，uploading表示上传中，info表示上传失败	string
message	上传图片的状态的信息	string
file	上传的file对象（仅上传才有）	object

showImageType 属性支持的类型有

名称	描述
contain	保持宽高缩放图片，使图片的长边能完全显示出来
cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill	拉伸图片，使图片填满元素
none	保持图片原有尺寸
scale-down	取none或contain中较小的一个

uploader slot

属性	描述	返回给父组件的值
display	上传列表的展示	data（上传列表）
uploader	上传区域的展示	asyncLoading（异步loading的状态）

uploader events

名称	描述	参数
input	input事件	list（上传列表）
oversize	文件超出指定大小时触发	-
overcount	文件超出指定数量时触发	length（包含将要上传文件的上传列表的文件数量）
delete	删除文件时触发	data, index

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">默认</p>
      <vill-uploader v-model="list1"  @delete="handleDelete"></vill-uploader>
    </div>
    <div class="items">
      <p class="item_title">禁用</p>
      <vill-uploader :disabled="true"></vill-uploader>
    </div>
    <div class="items">
      <p class="item_title">限制上传最多3张,开启多图上传</p>
      <vill-uploader :uploadStyle="{color: 'burlywood'}" v-model="list2" :multiple="true" :max-count="3" @overcount="handleOverCount"></vill-uploader>
    </div>
    <div class="items">
      <p class="item_title">上传校验</p>
      <vill-uploader v-model="list3" :before-read="beforeRead"></vill-uploader>
    </div>
    <div class="items">
      <p class="item_title">显示上传状态</p>
      <vill-uploader v-model="list4" :after-read="afterReadFailed"></vill-uploader>
    </div>
    <div class="items">
      <p class="item_title">如果默认的图片是异步加载的且很慢</p>
      <vill-uploader v-model="list5" :before-read="beforeReadAsync"></vill-uploader>
    </div>
    <div class="items">
      <p class="item_title">自定义上传组件(上传文件)</p>
      <vill-uploader accept="text/*" v-model="list6">
        <template #display="{data}">
          <div class="file_item" v-for="(item, index) in data" :key="index">
            {{ item.file.name }}
          </div>
        </template>
        <template #uploader>
          <vill-icon :name="url" size="20" />
        </template>
      </vill-uploader>
    </div>
  </div>
</template>

<script> 
export default {
  data () {
    return {
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      url: ''
    }
  },
  watch: {
    list1() {
      console.log('list1 change')
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      setTimeout(() => {
        this.list2 = [{
          url: this.$withBase('/assets/imgs/slide/1_1.png')
        }]
        this.url = this.$withBase('/assets/imgs/slide/1_1.png')
        console.log(this.url)
      }, 200)
    },
    back() {
      this.$router.go(-1)
    },
    handleDelete(data, index) {
      console.log('删除的图片信息',data, index)
    },
    handleOverCount(index) {
      console.log('当前上传的张数', index)
    },
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        this.$toast('请上传jpeg的图片格式')
        return false
      }

      return true
    },
    beforeReadAsync() {
      return new Promise(resolve => {
        setTimeout(() => {
          this.list5 = [{
            url: this.$withBase('/assets/imgs/slide/1_1.png')
          }]
          resolve()
        }, 5000)
      })
    },
    afterReadFailed(item) {
      console.log(item)
      item.status = 'uploading'
      item.message = 'loading'

      setTimeout(() => {
        item.status = 'info'
        item.message = '上传失败'
      }, 3000)
    }
  }
}
</script>
<style lang="scss" scoped>
.file_item{
  height: 80px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #969799;
  font-size: 14px;
  background: #f7f8fa;
  margin: 0 8px 8px 0;
}
</style>