参考地址: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. 开心档之MySQL 导入数据

    MySQL 导入数据 本章节我们为大家介绍几种简单的 MySQL 导入数据命令. 1.mysql 命令导入 使用 mysql 命令导入语法格式为: mysql -u用户名 -p密码 < 要导入的 ...

  2. 治理效率提升77%!揭秘基于DataLeap实时健康分的最佳实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景 某企业实时数仓团队通过数据收集.整合.计算和存储构建实时数据仓库,为企业提供快速.准确.可靠的实时数据分析和 ...

  3. 大数据-业务数据采集-FlinkCDC 读取 MySQL 数据存入 Kafka

    目录 作用 app 产生各层数据的 flink 任务 bean 数据对象 common 公共常量 utils 工具类 app.ods.FlinkCDC.java package com.atguigu ...

  4. Sublime Text 查找的内容 高亮显示

    1. 默认情况下是方框,看起来不太方便 2. 选中 "同" 然后按 Alt +F3[下方的查询框要出现,没有的话按 Ctrl+F 调出来,否则不会高亮显示] 同时,选中的文字还会填 ...

  5. JDK,Mysql,Tomcat Linux安装

    Linux的软件安装 JDK安装 注意:rpm与软件相关命令 相当于window下的软件助手 管理软件 步骤: 1)查看当前Linux系统是否已经安装java 输入 rpm -qa | grep ja ...

  6. Go--append()

    作用:在原切片的末尾添加元素 实例: package main import "fmt" func main() { s1 := []int{} fmt.Printf(" ...

  7. Java 键值对数据本地保存与读取

    代码: package com.sux.demo.utils; import com.alibaba.fastjson.JSONObject; import java.io.File; import ...

  8. Find (and kill) process locking port 9000 on Mac

    You can try netstat netstat -vanp tcp | grep 9000 For macOS El Capitan and newer (or if your netstat ...

  9. C++正则表达式的初步使用

    正则表达式(Regular Expressions),又被称为regex.regexp 或 RE,是一种十分简便.灵活的文本处理工具.它可以用来精确地找出某文本中匹配某种指定规则的内容.从C++11开 ...

  10. 使用 Python 参与算法竞赛

    引言 众所周知,打算法竞赛最频繁使用的语言是 C++.然而,对于那些不卡复杂度的题目,可以考虑使用 Python 编写(因为 Python 真的好写). 本文将简单地介绍一些 Python 使用技巧和 ...