# 文件上传 Upload

# 文件选择上传控件

文件上传

基本用法

定义上传类型为文件(type:file)

<title>基本用法</title>
<describe>定义上传类型为文件(type:file)</describe>
<template>
<p>文件上传</p>
 <hc-upload
   type="file"
  :allow-drag="true"
   v-model="value"
   button-text="上传"
   @error="handleError"
  >
  </hc-upload>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      value: ''
    }
  },
  methods: {
   handleError: function(e) {
     console.log(e)
   }
  }
}
</script>

# 上传图片类型的资源

图片上传

基本用法

定义上传类型为图片(type:image)

<title>基本用法</title>
<describe>定义上传类型为图片(type:image)</describe>
<template>
  <p>图片上传</p>
   <hc-upload v-model="value" type="image" ></hc-upload>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
      return {
        value: ''
      }
  },
  methods: {
   handleError: function(e) {
     console.log(e)
   }
  }
}
</script>

# 上传完成事件

文件上传

基本用法

当前上传的文件,上传动作全部执行完成(无论成功失败)时,才会触发complete:“上传完成事件”。
返回值包含e.value: 当前组件的值,e.status: 本次上传的所有文件状态。

<title>基本用法</title>
<describe>
  当前上传的文件,上传动作全部执行完成(无论成功失败)时,才会触发complete:“上传完成事件”。</br>
  返回值包含e.value: 当前组件的值,e.status: 本次上传的所有文件状态。
</describe>
<template>
<p>文件上传</p>
 <hc-upload
   type="file"
   v-model="value"
   button-text="上传"
   @complete="handleComplete"
  >
  </hc-upload>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      value: ''
    }
  },
  methods: {
   handleComplete: function(e) {
     console.log(e)
   }
  }
}
</script>

# 属性及事件

# HcUpload 属性

属性 说明 类型 可选值 默认值
value 当前值,支持v-model方式使用 string -- --
type 上传类型(文件/图片) file / image -- file
allow-drag 允许拖拽上传(文件类型支持) boolean -- false
allow-upload 是否允许上传文件 boolean -- true
allow-delete 是否显示文件删除按钮 boolean -- true
allow-download 是否允许下载文件 boolean -- true
allow-preview 是否允许预览文件 boolean -- true
limit-count 允许上传文件的数量, 0为不限制 number -- 不限制
limit-type 限制文件类型, 以逗号分隔的文件后缀名,默认不限制 string -- *.*
multiple 是否允文件许多选模式 boolean -- true
disabled 是否禁用 boolean -- false
button-text 上传按钮文字 -- -- 上传
button-class 上传按钮样式 -- -- --
preview-watermark 是否开启水印,default表示走默认配置 string/boolean default/true/false default

# HcUpload 事件

事件名 说明 参数
change 值改变事件 event.value: 上传文件后的新值
complete 上传完成事件(平台版本 > 5.4.2.2) event.value: 上传文件后的新值,event.status: 本次上传的文件状态