- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
在elementui 的上传组件中实现单文件上传，使用:limit=“1”
属性限制选择文件个数，有个弊端就是当选择完一个文件之后就不能再继续选择文件，这并不是产品经理想要的，我们期望的结果是：当再次选择时直接覆盖上次上传的文件，保证文件列表中只有一个文件。
* accept属性可以限制文件类型，file-list是文件列表，action绑定文件上传路径
* 当手动提交文件时，使用this.$refs.upload.submit()来上传文件
* 选择文件可以触发钩子函数on-change，因此在on-change钩子函数中去操作。 //组件 <el-upload class=
"upload_wrap" ref="upload" action="uploadUrl" accept=".png" :auto-upload="false"
:file-list="fileList" :on-progress="onProgress" :on-change="onChange"> <el-
button slot="trigger" type="text"><i class="el-icon-upload" style=
"font-size:16px"></i>上传文件</el-button> <el-button style="margin-left: 10px;" size
="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip"
class="el-upload__tip">只支持上传.h5文件，文件最大不得超过2G</div> </el-upload> //方法 //
限制文件上传的个数 onChange(file, list) { if (list.length > 1 && file.status !== "fail")
{ list.splice(0, 1); } else if (file.status === "fail") { errorMsg("上传失败，请重新上传！"
); list.splice(0, 1); } }, // 上传之前限制文件格式 beforeUp(file) { const isH5 = file.name
.split(".")[1] === "png"; const isLt2G = file.size / 1024 / 1024 / 1024 < 2; if
(!isH5) { errorMsg("仅支持上传.png文件"); } if (!isLt2G) { errorMsg("上传文件大小不能超过 2G!");
} return isH5 && isLt2G; }, submitUpload() { this.$refs.upload.submit(); },
//样式，去掉过渡动画 .upload_wrap { display: flex; flex-direction: column; align-items:
flex-start; } /deep/ .el-list-enter-active, /deep/ .el-list-leave-active {
transition: none; } /deep/ .el-list-enter, /deep/ .el-list-leave-active {
opacity: 0; } /deep/ .el-upload-list__item-name { width: 300px; } /deep/ .el-
upload-list { height: 40px; }