HTML图片上传

👍如果有用帮忙点个赞👍

概述

该文档描述了一个基于Vue 3和Element Plus的图片上传组件。该组件允许用户上传图片文件，支持批量上传、图片预览、删除和清空功能。组件还包含图片格式和大小的验证，确保上传的图片符合要求。

功能特性

图片上传：支持上传JPG/PNG格式的图片，单次最多可上传100张。

图片预览：上传的图片会以缩略图的形式展示，用户可以点击查看。

图片删除：用户可以删除单张图片或清空所有已上传的图片。

图片验证：上传前会验证图片的格式和大小，确保图片符合要求。

批量上传：支持一次性上传多张图片。

上传进度提示：上传过程中会显示加载动画，提示用户上传进度。

错误处理：如果图片上传失败或图片格式错误，会显示相应的错误提示。

使用说明

1. 引入依赖

在HTML文件中引入以下依赖：

Element Plus

Element Plus Icons

Axios

2. HTML结构

组件的HTML结构如下：

图片上传

已选择 {

{ fileList.length }} 张图片

v-model:file-list="fileList"

class="upload-area"

action="#"

:auto-upload="false"

:on-change="handleFileChange"

:before-remove="handleBeforeRemove"

multiple

accept="image/*"

:limit="100"

list-type="picture-card">