文件上传 Upload

文件选择上传控件

文件上传

基本用法

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

<title>基本用法</title>
<describe>定义上传类型为文件(type：file)</describe>
<template>
<p>文件上传</p>
 <hc-upload
   type="file"
   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>

属性及事件

HcUpload 属性

属性	说明	类型	可选值	默认值
value	当前值，支持v-model方式使用	string	--	--
type	上传类型（文件/图片）	file / image	--	file
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: 上传文件后的新值

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

登录