Vue核心知识：使用elementsplus的upload组件怎么处理图片的增删

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

Element Plus 提供了强大的 Upload 组件来处理图片的添加和修改，以下是详细的步骤、原理和代码示例：

一、图片添加处理

1. 使用 Element Plus 的 Upload 组件
   Element Plus 的 Upload 组件可以方便地实现图片上传功能。通过设置 action 属性指定上传的 URL，list-type 属性设置为 “picture-card” 可以以图片卡片的形式展示上传的图片。
   HTML复制
   
   <el-upload
   action=“https://jsonplaceholder.typicode.com/posts/”
   list-type=“picture-card”
   :on-preview=“handlePreview”
   :on-remove=“handleRemove”
   :on-success=“handleSuccess”
   :file-list=“fileList”

<i class="el-icon-plus"></i>

2. 处理上传成功的图片 通过 on-success 钩子函数，可以在图片上传成功后更新 fileList，从而将新上传的图片添加到图片列表中。 JavaScript复制 # 二、图片修改处理 

1. 删除图片
   通过 on-remove 钩子函数，可以在删除图片时更新 fileList，从而将被删除的图片从图片列表中移除。
   JavaScript复制
   handleRemove(file, fileList) {
   this.fileList = fileList;
   }
2. 更新图片列表
   fileList 属性用于管理上传的文件列表。每次添加或删除图片时，fileList 都会更新，从而确保页面上显示的图片列表是最新的。

三、完整代码示例

HTML复制

<el-upload
action=“https://jsonplaceholder.typicode.com/posts/”
list-type=“picture-card”
:file-list=“fileList”
:on-preview=“handlePreview”
:on-remove=“handleRemove”
:on-success=“handleSuccess”

<i class="el-icon-plus"></i>

四、原理

Upload 组件：Element Plus 的 Upload 组件提供了丰富的属性和事件，可以方便地处理文件上传、预览和删除等操作。
文件列表管理：通过 fileList 属性，可以动态管理上传的文件列表。每次添加或删除文件时，fileList 会自动更新，从而确保页面上显示的文件列表是最新的。
事件处理：通过 on-preview、on-remove 和 on-success 等事件，可以自定义文件上传、预览和删除时的行为，例如更新文件列表、显示提示信息等。
通过以上步骤和代码，你可以轻松实现图片的添加和修改功能。

---

假设数据库中图片的保存格式为 [‘url1’, ‘url2’]，使用 Element Plus 的 Upload 组件处理图片的删除、添加以及先删除再添加的情况，可以按照以下步骤进行：

1. 删除一个图片

当用户点击删除图标时，on-remove 事件会被触发。在这个事件处理函数中，你可以更新 fileList，从而将被删除的图片从列表中移除，并同步更新数据库中的图片列表。
JavaScript复制
handleRemove(file, fileList) {
// 更新 fileList
this.fileList = fileList;
// 同步更新数据库中的图片列表
const updatedImageUrls = this.fileList.map(item => item.url);
// 假设 updateImageUrls 是更新数据库的函数
updateImageUrls(updatedImageUrls);
}

2. 添加一个图片

当用户上传新图片时，on-success 事件会被触发。在这个事件处理函数中，你可以更新 fileList，从而将新上传的图片添加到列表中，并同步更新数据库中的图片列表。
JavaScript复制
handleSuccess(response, file, fileList) {
// 更新 fileList
this.fileList = fileList;
// 同步更新数据库中的图片列表
const updatedImageUrls = this.fileList.map(item => item.url);
// 假设 updateImageUrls 是更新数据库的函数
updateImageUrls(updatedImageUrls);
}

3. 先删除一个图片，再增加一个图片

这种情况可以看作是上述两种情况的组合。先触发 on-remove 事件删除图片，再触发 on-success 事件添加图片。每次触发事件时，都更新 fileList 并同步更新数据库中的图片列表。
JavaScript复制
handleRemove(file, fileList) {
// 更新 fileList
this.fileList = fileList;
// 同步更新数据库中的图片列表
const updatedImageUrls = this.fileList.map(item => item.url);
updateImageUrls(updatedImageUrls);
}

handleSuccess(response, file, fileList) {
// 更新 fileList
this.fileList = fileList;
// 同步更新数据库中的图片列表
const updatedImageUrls = this.fileList.map(item => item.url);
updateImageUrls(updatedImageUrls);
}
完整代码示例
HTML复制

<el-upload
action=“https://jsonplaceholder.typicode.com/posts/”
list-type=“picture-card”
:file-list=“fileList”
:on-preview=“handlePreview”
:on-remove=“handleRemove”
:on-success=“handleSuccess”

<i class="el-icon-plus"></i>

说明
handleRemove：处理删除图片的逻辑，更新 fileList 并同步更新数据库中的图片列表。
handleSuccess：处理上传成功后的逻辑，更新 fileList 并同步更新数据库中的图片列表。
updateImageUrls：假设这是一个函数，用于更新数据库中的图片列表。你需要根据实际情况实现这个函数。