vue中上传文件相同文件问题
vue项目中会遇到上传文件的需求,jquery会有一些插件很方便,如果不使用插件网上的方法没有太容易的而且很多是原生JS或者基于jQuery操作dom结构的。那么在vue项目中如何实现呢,还有如何模拟表单文件提交呢?这里文件上传文件框的样式美化就不过多赘述了,有很多例子。只介绍一下功能的实现以及注意的问题。<template><div>&am
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,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
更多推荐
所有评论(0)