cv-upload-avatar 头像上传 ¶

简要 ¶

头像上传

示例 ¶

::: demo

vue

<template>
  <div>
    <h1>上传组件 - 头像</h1>
    <cv-form-base labelWidth="auto">
      <cv-form-item label="默认使用全局配置">
        <cv-upload-avatar v-model="formData.avatar" :src="formData.avatar_cdn1" />
      </cv-form-item>
      <cv-form-item label="使用局部配置">
        <cvUploadAvatar v-model="formData.avatar2" :src="formData.avatar_cdn2" :upAction="upAction" />
      </cv-form-item>
    </cv-form-base>
    <h4 style="margin-bottom: 20px"></h4>
    <h4>显示数据</h4>
    <pre style="margin-top: 20px; background: #f6f6f6; padding: 20px; clear: both">{{ formData }}</pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      upAction: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      formData: {
        avatar: '',
        avatar2: '',
        avatar_cdn1: '',
        avatar_cdn2: '//f.10cdn.cn/default/default.png'
      }
    };
  },
  methods: {
    upResponseFn(response, file) {
      // 需要返回一个 URL
      return file.url;
    }
  },
  mounted() {}
};
</script>

:::

属性 ¶

属性名	类型	默认值	说明
v-model/modelValue	String,Array	-	上传后的文件路径
src	String	-	默认图片名称
upAction	String	-	必选参数，上传的地址
upName	String	file	文件名
upHeaders	Object	-	上传图片携带的header
upData	Object	-	自定义上传数据, 例如
upCookie	Boolean	false	是否需要带cookie
upAccept	String	-	接受上传的文件类型