el-upload拖拽上传不走before-upload

时间: 2023-10-08 14:09:53 浏览: 155

解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

我要实现的功能是在上传文件之前校验是否表格中存在重复的数据，有的话，需要弹窗提示是否覆盖，确认之后继续上传，取消之后，就不再上传。项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-progress="progressUpload" :before-upload= 在Vue2.0中，Element-UI库提供了一个强大的组件`el-upload`，用于处理文件上传功能。在本文中，我们将深入探讨如何解决在`before-upload`方法返回`false`时，`submit()`方法不生效的问题，以及如何在取消上传时仅删除特定文件。 `before-upload`是`el-upload`组件的一个关键方法，它允许我们在文件上传前进行自定义验证。如果此方法返回`false`，则上传将被阻止。在问题描述中，你需要在上传前检查表格中是否存在重复数据，并根据用户的选择决定是否继续上传。你可以通过以下方式实现： ```javascript beforeUpload(file) { // 验证逻辑，检查表格中是否有重复数据 const duplicate = checkDuplicateData(file); if (duplicate) { // 如果有重复数据，弹出提示框询问用户 const shouldOverride = confirm('文件已存在，是否覆盖？'); if (shouldOverride) { // 用户确认覆盖，允许上传 return true; } else { // 用户取消，阻止上传 return false; } } // 没有重复数据，直接上传 return true; } ``` 然而，根据问题描述，即使`before-upload`返回`false`，`submit()`仍然尝试上传文件。这可能是因为在Element-UI的内部实现中，`before-upload`返回`false`会阻止默认的提交行为。为了解决这个问题，可以使用组件的底层API，如下所示： ```javascript // 当用户确认覆盖后 if (shouldOverride) { // 使用组件的子组件（FileList）的post方法手动触发上传 this.$refs.fileUpload.$children[0].post(file); } else { // 取消时，使用handleRemove移除特定文件 this.$refs.fileUpload.handleRemove(file); } ``` 在上述代码中，我们直接调用了`$children[0].post(file)`来手动触发上传，而不是使用`submit()`。同时，`handleRemove(file)`方法用于从文件列表中移除取消上传的文件。此外，问题中还提到了`clearFiles()`方法，它会清除整个文件列表，而你只想删除一个特定的文件。因此，使用`handleRemove(file)`是更合适的选择，因为它允许你指定要删除的文件。在Vue组件中，数据和方法的组织至关重要。以下是一个完整的`el-upload`组件使用的示例： ```html <template> <div class="uptemp"> <el-upload class="upload-demo" ref="upload" multiple="false" action="/web/api/uploadFile" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" :before-upload="beforeUpload" :file-list="fileList" :auto-upload="false" :multiple="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> </el-upload> </div> </template> <script> export default { data() { return { fileList: [] }; }, mounted() { // 页面加载完成后执行的函数 }, methods: { submitUpload() { this.$refs.upload.submit(); }, handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, handleChange(file, fileList) { console.log(file); console.log(fileList); }, beforeUpload(file) { // 这里是重点，将文件转化为formdata数据上传 let fd = new FormData(); fd.append('file', file); this.$http.post('/web/api/uploadFile', fd).then((res) => { console.log(res); }, (res) => { console.log(res); }); // 返回false以阻止默认上传 return false; } }, components: { // 其他组件 } }; </script> ``` 要解决Element-UI的`el-upload`组件在`before-upload`返回`false`时`submit()`无效的问题，可以利用组件的内部API手动触发上传或移除文件。确保在`before-upload`中执行自定义验证，并根据用户交互调用正确的处理方法。同时，确保你的Vue组件结构清晰，以便更好地管理和控制组件的行为。

你好！关于el-upload的拖拽上传不走before-upload方法的问题，可能有几种原因导致。首先，确保你已经正确地设置了before-upload属性并指定了对应的方法。其次，检查一下你的代码是否正确，特别是before-upload方法的实现部分。如果你确认这些方面都没有问题，那么可能是el-upload组件版本的问题。请确保你使用的是最新版本的el-upload组件，并查看它的文档，了解是否有相关的更新或者已知问题。另外，你还可以尝试在el-upload组件上添加@dragover和@drop事件监听器，并在这些事件的处理方法中手动调用before-upload方法来实现拖拽上传前的逻辑。希望能帮到你！如果还有其他问题，请随时提问。

阅读全文

el-upload拖拽上传不走before-upload

相关推荐

elemetUi 组件--el-upload实现上传Excel文件的实例

el-upload上传EXCEL【引入组件和依赖】使用elementUI的el-upload组件

el-upload 拖动上传图片成功但是成功回调不生效

el-upload 手动上传

el-upload批量上传文件

el-upload如何上传excel表

Vue.js 使用 el-upload 组件上传文件的实战代码示例

使用el-upload组件上传不同文件类型的技巧

el-upload组件实现上传并解析Excel文件数据

vue2 el-upload 实现拖拽上传文件 点确定后才上传 这个功能 写一个组件

el-upload上传文件接口参数

el-upload上传之前的校验

el-upload上传图片查看和删除

el-upload 重复

el-upload 属性

el-upload属性

el-upload组件 formFile文件上传

el-upload参数解释

el-upload 所有属性

最新推荐

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

"互动学习：行动中的多样性与论文攻读经历"

【R语言机器学习新手起步】：caret包带你进入预测建模的世界

在选择PL2303和CP2102/CP2103 USB转串口芯片时，应如何考虑和比较它们的数据格式和波特率支持能力？

红外遥控报警器原理及应用详解下载

关系数据表示学习

vue2 el-upload 实现拖拽上传文件点确定后才上传这个功能写一个组件