好的，下面是使用
Vue3+
Element-plus 编写
图片上传的代码及注释：
```html
<template>
<div>
<
el-
upload
class="avatar-
uploader"
action="/api/
upload"
:show-file-list="false"
:on-success="handleSuccess"
:before-
upload="beforeAvatar
Upload"
>
<!-- 上传按钮 -->
<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: 'Avatar
Upload',
setup() {
const imageUrl = ref('')
// 上传前的校验
const beforeAvatar
Upload = (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,
beforeAvatar
Upload,
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 中用于创建响应式数据的方法；
- `beforeAvatar
Upload` 方法用于上传前的校验，判断文件类型和大小是否符合要求；
- `handleSuccess` 方法用于上传成功的回调，在回调中将上传成功的图片地址赋值给 `imageUrl`，并提示上传成功；
- `setup` 函数是
Vue3 中的新特性，用于
组件的选项设置，返回一个对象，包含
组件中需要用到的数据和方法；
- `return` 中的数据和方法，会被
Vue3 自动注入到
组件的模板中使用；
- `style` 标签的 `scoped` 属性表示样式仅作用于当前
组件中的元素，不会影响到其他
组件的样式。
超级会员免费看
这篇博客记录了在Vue3项目中使用Element-Plus的el-upload组件进行图片批量上传时遇到的问题及解决过程。作者在初始尝试中遇到上传图片时触发接口错误404，第二次尝试改为手动上传导致图片重复，第三次尝试解决了图片删除后数组未更新的问题。通过调整代码，最终实现了正确的图片上传和管理功能。
订阅专栏 解锁全文
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
