参考地址: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. 补齐OLAP引擎短板!ByteHouse 是如何实现流批一体的?

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   计算机领域一直流传一句话--"没有银弹",这句话出自计算机科学家布鲁克斯<没有银弹& ...

  2. 一文读懂火山引擎A/B测试的实验类型(3)——多链接实验

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 一. 概述 多链接实验,也称为Split url实验,用户根据分流结果访问不同版本的url. 举个例子: 当您有两 ...

  3. 成为一个合格程序员所必备的三种常见LeetCode排序算法

    排序算法是一种通过特定的算法因式将一组或多组数据按照既定模式进行重新排序的方法.通过排序,我们可以得到一个新的序列,该序列遵循一定的规则并展现出一定的规律.经过排序处理后的数据可以更方便地进行筛选和计 ...

  4. EasyUI DataGrid 没有数据

    //判断后台返回数据是否没数据,没数据DataGrid添加一行 $(this).datagrid('appendRow', { itemid: '<div style="text-al ...

  5. 【计算机网络】JWT token、Session

    JWT token https://www.bilibili.com/video/BV1VM4y117qr/?spm_id_from=333.999.0.0&vd_source=d112766 ...

  6. 2015年第六届 蓝桥杯B组 C/C++决赛题解

    1.积分之迷 小明开了个网上商店,卖风铃.共有3个品牌:A,B,C. 为了促销,每件商品都会返固定的积分. 小明开业第一天收到了三笔订单: 第一笔:3个A + 7个B + 1个C,共返积分:315 第 ...

  7. Windows 系统如何完全卸载 VSCode

    0. 参考资料 Uninstall visual studio code in windows 1. 删不干净的用户数据 最近正在从 Sublime Text 3 环境切换到 VS Code,看重的是 ...

  8. SCA 技术进阶系列(二):代码同源检测技术在供应链安全治理中的应用

    直击痛点:为什么需要同源检测 随着 "数字中国" 建设的不断提速,企业在数字化转型的创新实践中不断加大对开源技术的应用,引入开源组件完成应用需求开发已经成为了大多数研发工程师开发软 ...

  9. vue 状态管理 一、状态管理概念和基本结构

    系列导航 vue 状态管理 一.状态管理概念和基本结构 vue 状态管理 二.状态管理的基本使用 vue 状态管理 三.Mutations和Getters用法 vue 状态管理 四.Action用法 ...

  10. 扒一扒爱奇艺影视剧新功能——AI识别、GIF动画生成、画面截图涂鸦

    AI 识别 点击画面中的  右侧出现 查看详情 GIF动画生成 点击画面中的 生成GIF动画 画面截图涂鸦 截图 涂鸦