el-upload移除文件

### 实现移除已上传文件 在 Element UI 中，`el-upload` 组件提供了多种方式来处理文件的上传和管理。为了实现移除已上传文件的功能，可以利用 `fileList` 属性以及自定义事件处理器。 当设置 `auto-upload=false` 时，允许更灵活地控制文件上传流程[^1]。对于已经选择但尚未上传的文件，可以通过监听 `change` 事件并结合 `remove` 方法来进行操作。而针对那些已经被服务器接收确认过的文件，则通常需要向服务端发送请求以完成实际删除动作，并更新本地状态反映这一变化。 下面是一个简单的例子展示如何通过编程手段移除选中的文件： ```html <template> <div id="app"> <!-- 设置 :on-preview 和 :on-remove 来绑定对应的函数 --> <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt /> </el-dialog> <button @click="submitUpload">Submit</button> <!-- 提交按钮用于触发上传 --> </div> </template> <script> export default { data() { return { fileList: [], // 存储当前选择/已上传的文件列表 dialogImageUrl: '', dialogVisible: false, }; }, methods: { handleRemove(file, fileList) { // 处理移除逻辑 console.log('Removed file:', file); // 如果是模拟环境下的假数据可以直接在这里做数组过滤 this.fileList = fileList; /* 若涉及真实场景下需联系后台接口 */ /* axios.post('/api/removeFile', { fileId: file.id }) .then(response => { if (response.data.success === true){ this.$message({ type: 'success', message: '删除成功!' }); // 更新视图上的文件列表 this.fileList.splice(this.fileList.indexOf(file), 1); } }).catch(error => { console.error("Error removing file:", error); }); */ }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, submitUpload(){ // 手动提交所有待上传文件 const filesToBeUploaded = [...this.$refs.upload.uploadFiles]; Promise.all(filesToBeUploaded.map((item)=>{ let formData = new FormData(); formData.append('file', item.raw); return fetch("/upload",{ method:"POST", body:formData }); })).then(()=>{ alert("All selected files have been uploaded successfully."); // 清空文件队列 this.fileList=[]; }); } } }; </script> ``` 在这个案例里，每当用户尝试从界面上移除某个项目时都会调用 `handleRemove()` 函数，在其中可以根据实际情况决定是要立即执行客户端侧的变化还是进一步发起网络请求通知服务器同步更改[^2]。此外还展示了怎样使用对话框预览图片卡片形式展示的照片[^3]。