vue中上传文件遇到的问题
2017-12-14 11:23
579 查看
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,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
欢迎交流讨论。
这里文件上传文件框的样式美化就不过多赘述了,有很多例子。只介绍一下功能的实现以及注意的问题。
<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,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
欢迎交流讨论。
相关文章推荐
- 转:关于我使用spring mvc框架做文件上传时遇到的问题
- PHP上传遇到的问题-php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项
- jsp、servlet上传文件遇到的问题
- vue中上传文件相同文件问题
- Itunes connect上传应用视频 app preview时遇到“无法载入文件”的问题
- 表单包含file上传文件提交,使用ajaxSubmint或者ajaxForm 遇到的问题以及解决方法
- 【FTP】ftp上传文件到AIX遇到ftp 450错误的问题
- TCP上传文件 遇到发现一些问题
- lamp使用php处理上传文件,调用move_uploaded_file函数遇到目录写权限问题及解决过程
- linux使用ftpclient文件上传遇到的问题
- Struts2 单文件上传遇到的问题及解决方法
- AFN上传图片文件 遇到 NSURL中fileURLWithPath和URLWithString 的区别的问题
- 使用Spring MVC 实现文件上传遇到的问题以及解决方案
- Apache+PHP,swfupload做批量上传时遇到的文件类型支持问题和文件上传大小限制问题的相应解决方案
- 文件上传遇到的问题
- webupload文件上传过程中遇到的一个问题
- 用SSH上传文件到Linux遇到的问题
- wordpress上传文件时所遇到的问题
- 文件上传所遇到的413问题
- input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。