ElementUI 上传文件按钮之选取文件按钮禁用后仍可点击

1. 情况说明:在使用elmentUI的按钮组件时,禁用掉了按钮,但是仍可以点击选取文件。

2. 检查代码:按钮的disabled绑定没问题,后来仔细查看,原来是el-upload没有绑定disabled。

正确代码:

<el-upload
  :disabled="fileUpload"
  ref="fileInput"
  :action="baseUrl + '?antSerApplyNo='+antSerApplyNo"
  name="advanceFileUpload"
  :on-change="handleChange"
  :on-remove="handleRemove"
  :on-progress="handleProgress"
  :on-success="handleSuccess"
  :file-list="fileList"
  :on-error="handleError"
  :on-exceed="handleExceed"
  :before-remove="beforeRemove"
  :multiple="true"
  :limit="50"
  :headers="headers"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary" style="margin: 10px 10px 10px 0;" :disabled="fileUpload">选取文件</el-button>
  <el-button size="small" :loading="upFileFlag" :disabled="fileUpload"  type="success" @click="submitUploaddialog">上传文件</el-button>
  <div slot="tip" class="el-upload__tip">温馨提示:只能上传pdf、jpg、jpeg文件!</div>
</el-upload>

 

  • 11
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要使用 ElementUI 上传文件到后端,您需要: 1. 配置上传组件 ``` <el-upload class="upload-demo" action="/your/upload/api" :auto-upload="false" :on-change="handleChange"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="upload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 2. 在Vue.js实例中编写上传方法 ``` methods: { handleChange(file, fileList) { // file: 当前操作的文件对象 // fileList: 已上传文件列表 }, upload() { const formData = new FormData(); // 获取上传组件中的所有文件 this.$refs.upload.uploadFiles.forEach(file => { // 将文件添加到formData中 formData.append('file', file.raw); }); // 发送POST请求,将formData上传到后端 axios.post('/your/upload/api', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { // 处理响应结果 }).catch(error => { // 处理异常情况 }); } } ``` 3. 在后端编写文件上传接口 根据您的后端实现方式不同,可能需要使用不同的技术栈和框架来编写文件上传接口。通常情况下,您需要在后端编写一个接收POST请求的API,将接收到的文件保存到指定的目录中,并返回上传成功的响应结果。 以上是一个简单的 ElementUI 文件上传到后端的示例,您可以根据您的实际需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值