element-ui el-upload 删除

### Element UI `el-upload` 实现文件删除功能 当使用 `el-upload` 组件时，可以通过监听 `file-list` 的变化来管理已上传的文件列表，并通过自定义按钮或其他交互方式触发文件移除操作。为了实现这一目标，可以利用 `on-remove` 事件处理函数，在其中编写逻辑以真正从服务器端或本地存储中删除对应的文件。 下面是一个简单的 Vue.js 示例，展示了如何配置并实现带有删除功能的 `el-upload`： ```html <template> <div class="upload-demo"> <!-- 设置 :auto-upload=false 来禁用自动上传 --> <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt /> </el-dialog> <button @click="submitUpload">提交</button> <!-- 手动上传按钮 --> </div> </template> <script> export default { data() { return { fileList: [], // 文件列表 dialogImageUrl: '', dialogVisible: false, }; }, methods: { handleRemove(file, fileList) { // 处理文件移除事件 console.log('File removed:', file); // 如果需要向服务端发送请求，则在此处发起 AJAX 请求 this.fileList = fileList; // 更新文件列表状态 }, handlePictureCardPreview(file) { // 图片预览回调 this.dialogImageUrl = file.url; this.dialogVisible = true; }, submitUpload() { // 提交上传方法 const formData = new FormData(); this.fileList.forEach((item) => { formData.append('files', item.raw); // 将选中的文件加入到表单数据对象里 }); axios.post('/api/upload', formData).then(response => { alert('Files uploaded successfully!'); }).catch(error => { console.error('Error uploading files.', error); }); } } }; </script> ``` 此代码片段展示了一个基本的例子，其中包括了图片卡片形式(`list-type="picture-card"`), 并允许用户点击加号图标选择要上传的文件[^2]。 当选择了某个文件之后会显示在界面上作为待上传项；而一旦调用了 `remove` 方法就会触发相应的钩子函数 (`handleRemove`) 进行进一步的操作，比如实际地清除缓存或者通知后台撤销该条目等动作[^3]。 值得注意的是，如果希望阻止默认行为（即不立即更新视图），可以在 `handleRemove()` 中返回 `false` 或者调用参数里的 `done(false)` 函数[^1]。