vue中上传文件相同文件名没反应
2024-08-25 03:59:48
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,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
最新文章
- iOS开发随笔
- FWT
- CentOS6.5安装openLdap
- 第十章实践——系统级I/O代码运行
- 李洪强漫谈iOS开发[C语言-009] - C语言关键字
- 50个python库
- oracle--insert
- 【转】Java自动装箱、拆箱、缓冲池
- Android学习笔记:ListView简单应用--显示文字列表
- 使用ThinkPHP+Uploadify实现图片上传功能
- 掌握numpy(四)
- asp.net core系列 55 IS4结合Identity密码保护API
- 【JAVA】文件各行打乱
- Spring Cloud微服务笔记(一)微服务概念
- Root(hdu5777+扩展欧几里得+原根)2015 Multi-University Training Contest 7
- Linux下编写和加载 .ko 文件(驱动模块文件)
- Task 6.1 校友聊之NABCD模型分析
- FA_在建工程转固定资产(流程)
- eclipse debug 错误 之 processWorkerExit
- 使用jxls技术导入Excel模版数据(转自其他博客)