el-upload before-upload修改action无效

时间: 2023-11-16 19:55:33 浏览: 168

解决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组件结构清晰，以便更好地管理和控制组件的行为。

您好，针对您的问题，可能是因为您在 before-upload 钩子函数中修改了 action，但是并没有生效。这可能是因为在 before-upload 中修改 action 并不会影响到上传组件的实际行为，因为上传组件在 before-upload 钩子函数执行之前已经确定了上传的地址。如果您需要动态修改上传地址，可以考虑使用 upload 方法的第二个参数，即 options 对象中的 action 属性来实现。

阅读全文

el-upload before-upload修改action无效

相关推荐

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

el-upload before-upload钩子未触发

el-upload上 before-upload 延时上传

el-upload el-upload 在异步

怎么改变el-upload-list el-upload-list--text的css样式

el-upload的before-upload属性如何用来限制文件上传的格式

el-upload怎么使用外部方法来请求后端路径，而不用写在el-upload的action里面

el-upload组件中的before-upload：怎么使用

<el-upload ref="imgurl" :file-list="imgurlfileList" :action="imgurlAction" :before-upload="imgurlBeforeUpload" list-type="picture-card" accept="image/*"> </el-upload>前端用这个代码怎样对接后端Iformfile的接口

vue el-upload 上传时before-upload对应的函数没被调用

如何在el-upload组件中使用before-upload钩子函数？

点击el-upload之外的按钮，怎么判断el-upload里的文件是否上传

Python 查看主机IP及mac地址

1-全球各国信息化发展指数IDI指数2007-2017年-社科数据.zip

最新推荐

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

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

【交互特征：优化与调试的艺术】：实战技巧，提升回归模型与分类模型的性能

用IDEA写一个高速收费系统框架附带代码

大模型推荐系统: 优化算法与模型压缩技术

关系数据表示学习

c语言从链式队列中获取头部元素并返回其状态的函数怎么写