el-upload 清除fileList

时间: 2023-10-13 19:58:19 浏览: 201

vue-cli3.0+element-ui上传组件el-upload的使用

5星 · 资源好评率100%

在Vue.js开发中，Element UI 是一款非常流行的前端UI库，它提供了丰富的组件，使得开发者能够快速构建美观的用户界面。在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 `<el-upload>`组件的基本用法是在模板中创建一个元素，通过属性来控制它的行为。例如： ```html <el-upload class="upload-demo" :limit="limit" :action="action" :accept="accept" :data="data" :multiple="multiple" :show-file-list="showFileList" :on-exceed="handleExceed" :with-credentials="withcredentials" :before-upload="handleBeforeUpload" :on-progress="handleProgress" :on-success="handleSuccess" :on-error="handleError"> <el-button size="small" type="primary">上传</el-button> </el-upload> ``` 在上述代码中： - `limit` 用于限制可上传的文件数量。 - `action` 指定文件上传的URL。 - `accept` 接受的文件类型，如".jpg,.png"。 - `data` 可以传递额外的参数到服务器。 - `multiple` 是否支持多选文件，设置为`true`则开启。 - `show-file-list` 是否显示已上传文件的列表。 - `with-credentials` 是否发送cookies，通常用于处理登录状态。 - `before-upload` 在文件上传前的钩子，可以进行拦截。 - `on-exceed` 当超过限制时的回调。 - `on-progress` 文件上传过程中的进度回调。 - `on-success` 文件上传成功时的回调。 - `on-error` 文件上传失败时的回调。对于文件上传的限制，可以通过以下两个钩子函数实现： 1. `handleExceed`：当文件个数超出限制时触发，例如限制为20个文件，超出则提示错误并阻止上传。 ```javascript private handleExceed(files, fileList) { if (fileList.length > 20) { this.$message.error('最多允许上传20个文件'); return false; } } ``` 2. `handleBeforeUpload`：在文件上传前执行，可以做大小和类型的限制，例如限制文件大小不超过5MB和指定文件类型。 ```javascript private handleBeforeUpload(file) { const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { this.$message.error('不得超过5M'); return isLt5M; } const name = file.name ? file.name : ''; const ext = name ? name.substr(name.lastIndexOf('.') + 1, name.length) : true; const isExt = this.accept.indexOf(ext) < 0; if (isExt) { this.$message.error('请上传正确的格式类型'); return !isExt; } // 将文件信息添加到自定义的列表中 this.objAddItem(this.tempArr, file); } ``` 在上传过程中，`handleProgress`钩子用于更新进度条的值，例如： ```javascript private handleProgress(event, file, fileList) { this.tempArr.forEach((element, index) => { if (element.uid === file.uid) { const progress = Math.floor(event.percent); element.progress = progress === 100 ? 99 : progress; } }); } ``` 以上就是关于vue-cli3.0+element-ui上传组件el-upload的使用介绍。通过自定义这些属性和钩子函数，我们可以灵活地控制文件上传的过程，满足各种业务场景的需求。在实际开发中，还可以结合axios等HTTP库进行更复杂的请求处理，以及利用Element UI提供的其他功能，如自定义上传列表样式、上传失败重试等，来提升用户体验。

要清除el-upload的fileList，您可以使用以下方法： 1. 使用ref属性获取el-upload组件的引用。例如，如果您给el-upload设置了ref属性为"uploadRef"，那么可以通过this.$refs.uploadRef来获取引用。 2. 调用reset方法来重置fileList。例如，使用this.$refs.uploadRef.clearFiles()来清除fileList。这样就可以清除el-upload的fileList了。请注意，这只会清除前端的fileList，而不会实际删除服务器上的文件。如果您也想在后端删除文件，请在上传成功后执行相应的后端操作。

阅读全文

el-upload 清除fileList

相关推荐

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

vue中el-upload上传图片到七牛的示例代码

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

el-upload上传清除当前列表文件

el-upload的handleError(err, file, fileList)完善

el-upload undefined

el-upload中的文件列表无法清除

el-upload上传时file-list 失效

el-upload超出limit的限制的钩子on-exceed怎末写

el-upload上传文件选择文件后调用接口前弹窗选择传参参数后在进行上传如何实现

element-ui 上传图片后清空图片显示的实例

elementui upload怎么回显图片

如何实现让elemntui上传之后图片预览清除对应预览的图片

Python 查看主机IP及mac地址

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

ASP+ACCESS基于WEB网上留言板(源代码+论文)（源代码+论文+说明文档）.zip

生产现场工艺文件执行检查管理流程说明.docx

1-全国各省人口密度数据2000-2021年-社科数据.zip

基于PCIe接口的深度学习项目实例的详细介绍3.docx

最新推荐

Python 查看主机IP及mac地址

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

ASP+ACCESS基于WEB网上留言板(源代码+论文)（源代码+论文+说明文档）.zip

生产现场工艺文件执行检查管理流程说明.docx

1-全国各省人口密度数据2000-2021年-社科数据.zip

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

管理建模和仿真的文件

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

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

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

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