参考地址: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>

文件上传change事件只执行一次的问题的更多相关文章

  1. Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗

    Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你没有Hadoop集群的话也没有关系,我这里给出当时我 ...

  2. vue项目中解决type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...

  3. Python Paramiko实现sftp文件上传下载以及远程执行命令

    一.简介 Paramiko模块是基于Python实现的SSH远程安全连接,用于SSH远程执行命令.文件传输等功能. 安装模块 默认Python没有自带,需要手动安装: pip3 install par ...

  4. HDwiki文件上传导致远程代码执行漏洞

    漏洞版本: HDwiki(2011) 漏洞描述: 互动维客开源系统(HDwiki)作为中国第一家拥有自主知识产权的中文维基(Wiki)系统,由互动在线(北京)科技有限公司于2006 年11月28日正式 ...

  5. element ui upload 组件多文件上传,最终只显示上传一个的问题

    问题描述:一次选多张图片上传的时候界面上只有一张图片显示,并且上传调用的接口次数与选择的图片数量一致,且接口已200. JSON格式,"url"是最终显示的图片地址 {     & ...

  6. input type=”file“ change事件只执行一次的问题

    js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...

  7. input file美化,文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

  8. Uploadify多文件上传插件.NET使用案例+PHP使用案例

    ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...

  9. WEB安全性测试之文件上传漏洞

    1.漏洞描述:文件上传漏洞,是指可以利用WEB上传一些特定的文件包含特定代码如(<?php phpnfo;?> 可以用于读取服务器配置信息.上传成功后可以点击) 上传漏洞是指用户上传了一个 ...

  10. WEB安全:文件上传漏洞

    文件上传漏洞过程 用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力. 一般的情况有: 上传文件WEB脚本语言,服务器的WEB容器解释并执行了用户上传的脚本,导致代码执行: ...

随机推荐

  1. 如何使用TCP/IP开发网络程序

    摘要:进行TCP协议网络程序的编写,关键在于ServerSocket套接字的熟练使用,TCP通信中所有的信息传输都是依托ServerSocket类的输入输出流进行的. 本文分享自华为云社区<Ja ...

  2. 容器卡在terminate状态无法删除

    1. pod卡在terminate状态无法删除.一般是lxcfx 卡住 或者 logcounter组件进程读容器数据盘分区导致的 2.  验证一下我们的猜测 cat /sys/fs/fuse/conn ...

  3. 数字U家,即刻出发!2022联合利华黑客马拉松启动!

    2022联合利华黑客马拉松火热报名倒计时! 欢迎各领域的个人及组织团队参与 人工智能.数据挖掘.市场规模预测.原材料与包装风险控制.AR/VR.低碳.消费者偏好研究等超多创新赛题,任选其一. 作为快消 ...

  4. 【每日一题】16.Treepath (LCA + DP)

    补题链接:Here 题意总结:寻找有多少条两个点之间偶数路径 看完题,很容易想到在树型中,同一层的节点必然是偶数路径到达,还有就是每隔两层的节点一样可以到达,所以我就理所应当的写了如下代码 using ...

  5. 项目2 可视化数据(第17章 使用API)

    17.1 使用Web API Web API是网站的一部分,用于与使用非常具体的URL请求特定信息的程序交互.这种请求称为API调用.请求的数据将以易于处理的格式(如JSON或CSV)返回. 17.1 ...

  6. 8、SpringBoot 事务

    系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...

  7. C# 几种常见数据结构(数组、链表、Hash表)

    一.内存上连续存储,节约空间,可以索引访问,读取快,增删慢 Array: 在内存上连续分配的,而且元素类型是一样的,可以坐标访问;读取快--增删慢,长度不变 { //Array:在内存上连续分配的,而 ...

  8. go 接口学习笔记

    这里是对接口在汇编层面上转换和实现的小结,详细了解可参考 Go 语言接口的原理 1. 类型转换:结构体到接口 1.1 结构体方法实现接口 package main type Duck interfac ...

  9. 每天学五分钟 Liunx 1000 | 软件篇:源码安装

    软件安装流程 前面软件篇提到了通过 RPM 和 YUM 在线安装的机制安装软件,除了这两种方式之外还有一种通过源码来安装软件的方式.

  10. 如何安全的大数据量表在线进行DDL操作

    本文为博主原创,转载请注明出处 随着业务的需要,工作中需要对生产数据库的一些表做一些DDL操作,由于生产数据库表的数据量都是几千万, 而且生产数据库的表还在不断的进行新增和查询操作.应用中需要对生产数 ...