文件上传change事件只执行一次的问题

参考地址:https://blog.csdn.net/john_xiaoweige/article/details/81392110

本节中的注意点:

this.$refs.attenceInput.click();
点击a按钮,相当于点击了按钮B本身哦!
input type=”file“ change事件只执行一次的问题
HTML:<input id="file"type="file" onchange="upload()" ref="referenceUpload" />
回调成功方法里:this.$refs.referenceUpload.value = null;
否者成功后不能够进行二次导入哈!
<template>
<div class="upload-panel">
   <div class="panel-heading">考勤导入</div>
   <div class="panel-body">
      <p><strong>注意事项:</strong><br>1、导入文件格式:.xls,.xlsx<br>2、文件命名规则“年月名”,如:“201705运维部考勤”></a></p>
      <p style="margin-top:10px;"><strong>考勤导入:</strong><a class="btn btn-primary btn-xs " @click="chooseFile">选择文件</a></p>
      <p>已选择文件:<em style="color:red; font-style:normal;">{{attence}}</em></p><p>{{info}}</p>
      <input type="file" style="display:none" name="attence"  @change="changeFile($event)" ref="attenceInput" />
   </div>
   <div class="panel-footer">
      <a class="btn btn-primary btn-md" @click="upFile">确认导入</a>
   </div>
</div>
</template>
<script>
   export default {
     name: 'Upload',
     data () {
       return {
         attence: '',
         attenceFile: {}
       }
     },
     methods: {
       chooseFile () {
         this.$refs.attenceInput.click();
       },
       changeFile (e) {
         this.attence = e.target.files[0].name;
         this.attenceFile = e.target.files[0];
       },
       upFile () {
         let filename = this.attenceFile.name;
         let arr = filename.split('.');//这里这样还有点问题  如果别人是2010.23.34.xls这样的命名会出问题的
         if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
           alter('文件格式错误!');
           return;
         }
         let fileData = new window.FormData();
         fileData.append('file', this.attenceFile);//file参数名。this.attenceFile是参数内容
         // fileData.append('参数key', '内容value');
         let xhr = new window.XMLHttpRequest();
         xhr.open('POST', 'http://localhost:999/base/upload', true);
         xhr.send(fileData);
         xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
          if (xhr.status === 200) {
          let response = JSON.parse(xhr.response)
             console.log(response )    
             this.$refs.attenceInput.value = "";//这样才可以进行二次导入
         } else {
             //导入失败的情况
             this.$refs.attenceInput.value = "";//这样才可以进行二次导入
        }
       }
     }
       }
     }
   }
</script>
posted @   南风晚来晚相识  阅读(553)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示