vue中上传文件相同文件名没反应
vue项目中会遇到上传文件的需求,jquery会有一些插件很方便,如果不使用插件网上的方法没有太容易的而且很多是原生JS或者基于jQuery操作dom结构的。那么在vue项目中如何实现呢,还有如何模拟表单文件提交呢?
这里文件上传文件框的样式美化就不过多赘述了,有很多例子。只介绍一下功能的实现以及注意的问题。
<template>
<div>
<span>
<a href="javascript:;" class="file_prev">本地上传</a>
<input type="file" class="preFile" name="staffFile" multiple="multiple" @change="changeFn($event)" v-if="clearShow">
</span>
</div>
</template>
其中,multiple=”multiple”代表文件可多选;
给文件选择器绑定change事件让它在上传文件后去执行methods里的函数,@change=”changeFn($event)” ;
changeFn(e){
this.deviceArray = [];
let deviceFile = e.target.files;
let formData = new FormData();
for(let i=0;i<deviceFile.length;i++){
formData.append('file', deviceFile[i]);
}
this.clearShow = false;
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$axios.post(this.$API.processManage.processAddCheck,
formData, config
).then((res)=>{
console.log(res);
this.clearShow = true;
},()=>{
this.clearShow = true;
});
},
使用FormData()模拟表单提交文件,循环e.target.files的文件添加到FormData()中。
表单上传请求头信息headers: {‘Content-Type’: ‘multipart/form-data’},
再使用axios配合发送请求这样上传文件功能就基本实现了。
但是其中遇到一个问题就是change事件触发条件是文件上传框内容改变才可以,每次上传完文件默认是不清空上一次上传的内容的,这样上传同名文件就不会触发change事件。
网上现有的方法就是重置input上传文件的标签的dom结构,在vue里我的实现方法就是v-if去控制。
v-if=”clearShow”,初始化数据为true,在change事件触发的函数里设置clearShow为false,即移除了该input标签,然后在回调函数中再设置clearShow为true,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
vue中上传文件相同文件名没反应的更多相关文章
- vue中上传文件之multipart/form-data
首先在项目里用了拦截器的,由于拦截器会将传递的参数转成对象,所以你i提交的时候会发现multipart/form-data或转变成application/json 其次关于input的文件上传是需要一 ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue+上传文件夹
在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...
- vue 上传文件 并以表格形式显示在页面上
先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...
- 谈谈php中上传文件的处理
这是一个表单的时代... 我们在浏览器中编辑自己的信息,会遇到上传头像:在文库中,我们会上传文档......到处存在“上传”这个词. php是最好的语言(其他语言的程序猿们不要打我...).php在处 ...
- PHP上传文件出现文件名被截掉第一个字符的问题
最近用PHP做了一个简单的上传功能,结果出现了一个意想不到的问题.我上传的文件,在获取$_FILES的时候发现文件名的第一个字符被截掉了,因为最开始上传的一直是数字或者字母为名称的文档,也没有太在意这 ...
- 现在,以编程方式在 Electron 中上传文件,是非常简单的!
必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
随机推荐
- JCTools, 场景特化的并发工具
同上一篇一样,在jmap -histo中发现MpscChunkedArrayQueue类的实例比较多,javadoc看了下,其原来是出自JC Tools,https://github.com/JCTo ...
- C++微专业课程辅导(内存模型和动态内存)
“除了静态内存和栈内存之外,每个程序还拥有一个内存池.这部分空间被称作自由空间(free store)或堆(heap).程序用堆来存储动态分配(dynamically allocate)的对象”——& ...
- Adobe9阅读器渗透攻击——20145301
Adobe9阅读器渗透攻击 实验步骤: 在kali终端中开启msfconsole,输入命令use exploit/windows/fileformat/adobe_cooltype_sing,进入该漏 ...
- 基于Android的闹钟的软件
一.本课题要求:设计一个基于Android的闹钟的软件. 实现的功能有:能通过界面设置闹钟的启动条件建立后台服务进程,当满足触发条件时,闹钟响应相应事件. 二.需求分析 该课题实现在手机操作系统And ...
- C++ tinyXML的使用和字符编码转换
转载:http://jetyi.blog.51cto.com/1460128/761708/ 关于tinyxml使用的文档有很多(这篇文章就写的很好),这里仅提一下字符编码的转换问题,如果你不熟悉字符 ...
- java在访问https资源时的证书信任问题
java程序在访问https资源时,出现报错 sun.security.validator.ValidatorException: PKIX path building failed: sun.sec ...
- BIOS、MBR、UEFI和GPT关系
很多用户在新买电脑,或是给已有电脑重装系统时都出现过怎么都无法引导U盘安装的情况.究其原因,还是没能搞清楚BIOS.MBR.UEFI和GPT的复杂关系.所以,今天小编就和大家分享一下它们之间的爱恨情仇 ...
- java对象在内存的大小
前言 一直以来,对java对象大小的概念停留在基础数据类型,比如byte占1字节,int占4字节,long占8字节等,但是一个对象包含的内存空间肯定不只有这些. 假设有类A和B,当new A()或者n ...
- 转载:负载均衡器技术Nginx和F5的优缺点对比
https://blog.csdn.net/zxc456733/article/details/78861100 nginx(一) nginx详解 nginx是一个被广泛使用的集群架构组件,我们有必要 ...
- 《剑指offer》第三十九题(数组中出现次数超过一半的数字)
// 面试题39:数组中出现次数超过一半的数字 // 题目:数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例 // 如输入一个长度为9的数组{1, 2, 3, 2, 2, 2, 5, ...