# upload

# 图片上传

ykc-upload 的基础用法（此demo只支持图片上传 jpg, jpeg, png等格式）。

上传图片

<template>
  <div class="upload-wrap">
      <ykc-upload></ykc-upload>
  </div>
</template>

<script>
  export default {
    methods: {
    }
  };
</script>

复制代码

# 文件上传

ykc-upload 的基础用法（此demo只支pdf, doc, docx, xlsx, xls 文件上传。）。

<template>
  <div class="upload-wrap">
      <ykc-upload type="files"></ykc-upload>
  </div>
</template>

<script>
  export default {
    methods: {
    }
  };
</script>

复制代码

# 文件回显

测试文件.jpg

上传图片

<template>
  <div class="upload-wrap">
      <ykc-upload type="files" :file="data"></ykc-upload>
      <ykc-upload :file="data"></ykc-upload>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        data: [{
          url: 'https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/1627634335628.jpg',
          name: '测试文件.jpg'
        }]
      }
    },
    methods: {
    }
  };
</script>

复制代码

# Attributes

参数	必填	说明	类型	可选值	默认值
action	否	上传的地址	string	-	BaseServer1/proxy/file/upload
autoUpload	否	是否在选取文件后立即进行上传	boolean	-	true
name	否	上传的文件字段名	string	-	file
data	否	上传时附带的额外参数	object	-	-
type	否	上传文件类型	string	img: ('jpg', 'jpeg', 'png') ; files: ('pdf', 'doc', 'docx', 'xlsx', 'xls') ; pdf: (pdf) ; xlsx: ('xlsx', 'xls')	img
size	否	限制上传文件大小	number	-	2M
file	否	上传的文件, 例如: [{name: 'demo.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	-	-
text	否	默认文字	string	-	上传图片 / 上传文件

# Events

事件名称	说明	回调参数
handleChange	文件状态改变时，添加文件、上传成功和上传失败时都会被触发	file: file对象
handleRemove	文件列表移除文件时触发	file: file对象
handlesSuccess	文件上传成功时触发	file: file对象
handleError	文件上传失败时触发	file: file对象
handleProgress	文件上传时触发	file: file对象

← switch date-picker →