好的，下面是使用
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 &#
39;
vue&#
39;
export default {
name: &#
39;Avatar
Upload&#
39;,
setup() {
const imageUrl = ref(&#
39;&#
39;)
//
上传前的校验
const beforeAvatar
Upload = (file) => {
const isJPG = file
.type === &#
39;image/jpeg&#
39;
const isPNG = file
.type === &#
39;image/png&#
39;
const isLt2M = file
.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
this
.$message
.error(&#
39;
上传头像
图片只能是 JPG/PNG 格式!&#
39;)
return false
}
if (!isLt2M) {
this
.$message
.error(&#
39;
上传头像
图片大小不能超过 2MB!&#
39;)
return false
}
return true
}
//
上传成功的回调
const handleSuccess = (res) => {
if (res
.code === &#
39;200&#
39;) {
imageUrl
.value = res
.data
.url
this
.$message
.success(&#
39;
上传成功!&#
39;)
}
else {
this
.$message
.error(&#
39;
上传失败，请重试!&#
39;)
}
}
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: #8c9
39d;
}
</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，第二次尝试改为手动上传导致图片重复，第三次尝试解决了图片删除后数组未更新的问题。通过调整代码，最终实现了正确的图片上传和管理功能。
订阅专栏 解锁全文
扫一扫
4251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
