element plus解决单文件上传后无法替换问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在使用 element plus 框架 el-upload 组件时,如果想上传单个文件可能会设置limit:1
, 但是用户在上传单个文件后发现自己想替换之前上传的文件, 此时你会发现此时重新点击上传组件并没有触发任何事件,哪怕你设置了on-change
或 on-exceed
方法
如果我们此时去掉limit:1
的限制发现是可以调用on-change
方法的, 而且on-change
中有两个参数uploadFile
和uploadFiles
, 虽然此时会每次上传都会产生一个文件, 我们只需要对多出的文件进行数组操作即可
通过on-change
事件我们直接对uploadFiles
进行操作, 代码如下
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:data="upload.extraData"
:disabled="upload.isUploading"
:on-change="handleFileChange"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-remove="handleRemove"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="handleTempDownload">下载模板</el-link>
</div>
</template>
</el-upload>
/** change事件 */
function handleFileChange (file, files) {
if (files.length > 1) {
fileList.value = [files[files.length - 1]]
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)