文件上传 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: 本次上传的文件状态

• 文件选择上传控件
• 上传图片类型的资源
• 上传完成事件
• 属性及事件
  • HcUpload 属性
  • HcUpload 事件

登录