好的，下面是
使用 Vue3+
Element-plus 编写
图片上传的代码及注释：
```
html
<template>
<div>
<
el-upload
class="
avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="before
AvatarUpload"
>
<!-- 上传按钮 -->
<img v-if="
imageUrl" :src="
imageUrl" class="
avatar">
<i v-
else class="
el-icon-plus
avatar-uploader-icon"></i>
</
el-upload>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: '
AvatarUpload',
setup() {
const
imageUrl = ref('')
// 上传前的校验
const before
AvatarUpload = (file) => {
const isJPG = file.type === '
image/jpeg'
const isPNG = file.type === '
image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
this.$message.error('上传头像
图片只能是 JPG/PNG 格式!')
return false
}
if (!isLt2M) {
this.$message.error('上传头像
图片大小不能超过 2MB!')
return false
}
return true
}
// 上传成功的回调
const handleSuccess = (res) => {
if (res.code === '200') {
imageUrl.value = res.data.url
this.$message.success('上传成功!')
}
else {
this.$message.error('上传失败，请重试!')
}
}
return {
imageUrl,
before
AvatarUpload,
handleSuccess
}
}
}
</script>
<style scoped>
.
avatar-uploader {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px dashed #ccc;
background-color: #f9fafc;
cursor: pointer;
}
.
avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.
avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
}
</style>
```
注释：
- `
el-upload` 是
Element-plus
中的上传
组件，`action` 属性指定上传接口地址，`show-file-list` 属性指定是否
显示上传文件列表，`on-success` 属性指定上传成功的回调函数，`before-upload` 属性指定上传前的校验函数；
- `img` 标签用于展示上传成功后的
图片，属性 `v-if="
imageUrl"` 判断 `
imageUrl` 是否存在，如果存在则
显示图片，否则
显示上传按钮；
- `i` 标签用于
显示上传按钮，属性 `v-
else` 表示如果 `
imageUrl` 不存在，则
显示按钮；
- `ref` 是 Vue3
中用于创建响应式数据的方法；
- `before
AvatarUpload` 方法用于上传前的校验，判断文件类型和大小是否符合要求；
- `handleSuccess` 方法用于上传成功的回调，在回调
中将上传成功的
图片地址赋值给 `
imageUrl`，并提示上传成功；
- `setup` 函数是 Vue3
中的新特性，用于
组件的选项设置，返回一个对象，包含
组件中需要用到的数据和方法；
- `return`
中的数据和方法，会被 Vue3 自动注入到
组件的模板
中使用；
- `style` 标签的 `scoped` 属性表示样式仅作用于当前
组件中的元素，不会影响到其他
组件的样式。
2005
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
