Element头像上传是一种非常流行的头像上传方式，它可以让用户快速、方便地上传头像。Element头像上传的主要功能是允许用户将本地图片文件上传到服务器，并将其保存为用户的头像。
Element头像上传的实现原理是：首先，用户在本地选择要上传的图片文件；然后，将该文件发送到服务器端；接着，服务器端将该文件保存到指定位置；最后，将该文件作为用户的头像显示出来。
// 客户端代码
// 选择图片文件
$('#file').on('change', function(){
// 获取图片文件数据
var file = this.files[0];
// 创建FormData对象
var formData = new FormData();
// 把图片文件添加到FormData对象中
formData.append('file', file);
// 向服务端发送数据
$.ajax({
url: '/upload',
type: 'POST',
// 把创建的FormData对象数据添加到请求中
data: formData,
// 告诉$.ajax方法不要解析请求参数
processData: false,
// 告诉$.ajax方法不要设置请求参数的类型
contentType: false,
success: function(data){
if(data && data.status == 0){
alert('上传成功');
}else{
alert('上传失败');
}
},
error: function(){
alert('上传出错');
}
}); }); 用图标、图片或者字符的形式展示用户或事物信息。
通过 shape 和 size 设置头像的形状和大小。
< template>
<el-row class="demo-avatar demo-basic">
<el-col :span="12">
<div class="sub-title">circle</div>
<div class="demo-basic--circle">
<div class="block">
<el-avatar :size="50" :src="circleUrl"></el-avatar>
</div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar :size="size" :src="circleUrl"></el-avatar>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="sub-title">square</div>
<div class="demo-basic--circle">
<div class="block">
<el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
</div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
circleUrl:
"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
squareUrl:
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
sizeList: ["large", "medium", "small"],
}
},
}
</script>支持三种类型：图标、图片和字符
<template>
<div class="demo-type">
<div>
<el-avatar icon="el-icon-user-solid"></el-avatar>
</div>
<div>
<el-avatar
src="https://img.mdwl.vip/upload11/2303/130843430.png" rel="external nofollow"
></el-avatar>
</div>
<div>
<el-avatar> user </el-avatar>
</div>
</div>
</template>
当展示类型为图片的时候，图片加载失败的 fallback 行为
<template>
<div class="demo-type">
<el-avatar :size="60" src="https://empty" rel="external nofollow" @error="errorHandler">
<img
src="https://img.mdwl.vip/upload11/2303/130843580.png" rel="external nofollow"
/>
</el-avatar>
</div>
</template>
<script>
export default {
methods: {
errorHandler() {
return true
},
},
}
</script>
当展示类型为图片的时候，使用 fit 属性定义图片如何适应容器框，同原生 object-fit。
<template>
<div class="demo-fit">
<div class="block" v-for="fit in fits" :key="fit">
<span class="title">{{ fit }}</span>
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fits: ["fill", "contain", "cover", "none", "scale-down"],
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
}
},
}
</script>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| icon | 设置头像的图标类型，参考 Icon 组件 | string | ||
| size | 设置头像的大小 | number/string | number / large / medium / small | large |
| shape | 设置头像的形状 | string | circle / square | circle |
| src | 图片头像的资源地址 | string | ||
| srcSet | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | string | ||
| alt | 描述图像的替换文本 | string | ||
| fit | 当展示类型为图片的时候，设置图片如何适应容器框 | string | fill / contain / cover / none / scale-down | cover |
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| error | 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为 | (e: Event) |
| 名称 | 说明 |
|---|---|
| default | 自定义头像展示内容 |
action.timeline | *时间轴组件相关的行为，必须引入时间轴组件后才能使用。action.timeline.timelineChange | Action设置当前的...
parallel.zlevel |number[ default: 0 ]设置 ECharts 平行坐标系所有图形的 zlevel 值。zlevel 用于 Canvas 分层（一种常见的优...
singleAxis.splitArea |ObjectECharts 单轴在grid区域中的分隔区域，默认不显示。singleAxis.splitArea.interval |number, Funct...
什么是 ECharts 折线图标域？折线图标域是用来对图表中的某个范围的数据进行标记的，通过折线图标域，你可以了解某段时间图表中...
series[i]-treemap.tooltip设置 Treemap 特定的提示框浮层。Treemap 提示框浮层属性formatter 注意：series.tooltip仅在tooltip....