el-upload js

`el-uploadjs` 是 Element UI 提供的一个文件上传组件，它允许用户上传图片，并提供了一些便捷的功能，比如将图片转换为 Base64 格式。在使用时，你可以通过监听文件上传完成后的 `on-success` 或 `on-change` 事件，获取到上传的图片文件，然后调用 JavaScript 的 `FileReader` API 将图片转换为 Base64。 以下是一个简单的示例： ```javascript import { ElUpload } from 'element-plus'; export default { components: { ElUpload, }, methods: { handleImageUpload(file) { const reader = new FileReader(); reader.onload = function (e) { const imgBase64 = e.target.result; // 在这里可以对 base64 数据进行操作，例如存储到数据库或显示在页面上 console.log('Image base64:', imgBase64); }; reader.readAsDataURL(file); }, }, setup() { return { upload: { action: 'your-server-url', // 上传地址 onSuccess: this.handleImageUpload, // 图片上传成功后的回调 }, }; }, } ```

### el-upload 组件中图标切换逻辑 在 `el-upload` 组件中，`el-icon-upload-success` 和 `el-icon-close` 图标的切换逻辑主要依赖于文件上传的状态以及自定义的事件处理函数。以下是详细的实现方式和逻辑： #### 1. 文件上传成功时显示 `el-icon-upload-success` 当文件上传成功时，可以通过 `on-success` 钩子函数来捕获上传成功的状态，并动态更新组件的状态以显示成功图标。例如： ```javascript methods: { handleSuccess(response, file, fileList) { // 在此方法中，可以将文件标记为已上传成功 file.status = 'success'; // 自定义属性标记文件状态 console.log('File uploaded successfully:', response, file, fileList); } } ``` 在模板中，可以通过判断文件状态动态切换图标： ```html <el-upload :on-success="handleSuccess" action="https://jsonplaceholder.typicode.com/posts/"> <template #default="{ file }"> <div v-if="file.status === 'success'"> <i class="el-icon-upload-success"></i> </div> <div v-else> <i class="el-icon-close"></i> </div> </template> </el-upload> ``` 通过这种方式，可以根据文件的状态动态切换图标[^1]。 #### 2. 文件上传失败或移除时显示 `el-icon-close` 当文件上传失败或被用户手动移除时，可以通过 `on-error` 和 `on-remove` 钩子函数捕获相关事件，并更新组件状态以显示关闭图标。 ```javascript methods: { handleError(err, file, fileList) { // 标记文件上传失败 file.status = 'error'; console.error('File upload failed:', err, file, fileList); }, handleRemove(file, fileList) { // 移除文件时的操作 console.log('File removed:', file, fileList); } } ``` 同样，在模板中可以通过文件状态动态切换图标： ```html <el-upload :on-error="handleError" :on-remove="handleRemove" action="https://jsonplaceholder.typicode.com/posts/"> <template #default="{ file }"> <div v-if="file.status === 'error' || file.status === 'removed'"> <i class="el-icon-close"></i> </div> <div v-else> <i class="el-icon-upload-success"></i> </div> </template> </el-upload> ``` #### 3. 动态绑定类名实现图标切换 如果需要更灵活地控制图标样式，可以使用动态绑定类名的方式。例如： ```html <el-upload :on-success="handleSuccess" :on-error="handleError" :on-remove="handleRemove" action="https://jsonplaceholder.typicode.com/posts/"> <template #default="{ file }"> <i :class="getIconClass(file)"></i> </template> </el-upload> ``` 在方法中定义图标切换逻辑： ```javascript methods: { getIconClass(file) { if (file.status === 'success') { return 'el-icon-upload-success'; } else if (file.status === 'error' || file.status === 'removed') { return 'el-icon-close'; } else { return 'el-icon-loading'; // 默认加载状态 } } } ``` #### 4. 注意事项 - 确保在 `on-success` 和 `on-error` 钩子中正确处理文件状态。 - 如果需要区分不同组件上传的文件，可以结合下标 `j` 或唯一标识符来管理文件状态[^1]。 - 在 TypeScript 环境下使用 `el-upload` 时，注意处理 `UploadAjaxError` 对象的嵌套结构，确保正确访问后端返回的数据[^2]。 ### 示例代码 以下是一个完整的示例代码： ```html <el-upload :on-success="handleSuccess" :on-error="handleError" :on-remove="handleRemove" action="https://jsonplaceholder.typicode.com/posts/"> <template #default="{ file }"> <i :class="getIconClass(file)"></i> </template> </el-upload> <script> export default { methods: { handleSuccess(response, file, fileList) { file.status = 'success'; }, handleError(err, file, fileList) { file.status = 'error'; }, handleRemove(file, fileList) { file.status = 'removed'; }, getIconClass(file) { if (file.status === 'success') { return 'el-icon-upload-success'; } else if (file.status === 'error' || file.status === 'removed') { return 'el-icon-close'; } else { return 'el-icon-loading'; } } } }; </script> ```