vue项目中解决文件上传 change事件只执行一次的问题
2021-01-26 11:14
标签:color sign def code txt ons lse ima tip 文件上传第一次上传一个文件后,再次上传这个文件,无法执行change事件, 01) 解决办法,借助v-if 02) 使用 Ant Design Vue 官方的 upload demo: vue项目中解决文件上传 change事件只执行一次的问题 标签:color sign def code txt ons lse ima tip 原文地址:https://www.cnblogs.com/dafei4/p/13230412.htmlvue项目中解决文件上传 change事件只执行一次的问题
template>
div>
h3>这里是需求页面h3>
input id="fileUpload" type="file" name="fileUpload"
accept=".xls,.xlsx,.pdf,.txt,.doc,.docx,.jpg,.gif,.png,.ppt,.pptx" multiple
style="" @change="changesFile" v-if="isShowFile" />
a-button ghost class="bts" type="primary" size="small" icon="plus" @click="addFiles">新增
a-button>
div>
template>
script>
import Vue from ‘vue‘
import Antd, { message,Select } from ‘ant-design-vue‘ //这是ant-design-vue
import ‘ant-design-vue/dist/antd.css‘
Vue.use(Antd);
export default {
components:{},
data() {
return {
isShowFile:true, //是否展示文件,选择上传
}
},
methods: {
// 新增文档
addFiles(){
// $(‘#fileUpload‘).click();
document.getElementById("fileUpload").click();
},
changesFile(){
this.isShowFile = false;
const formData = new FormData();
const fileObj=document.getElementById("fileUpload").files[0];
console.log(fileObj.size);
if(fileObj!="undefined"){
this.$post("https://www.mocky.io/v2/5cc8019d300000980a055e76", formData).then(res => {
this.isShowFile = true;
console.log("eeeeee");
});
}
},
}
};
script>
上一篇:web打开exe程序
下一篇:关于js类型转换
文章标题:vue项目中解决文件上传 change事件只执行一次的问题
文章链接:http://soscw.com/index.php/essay/47247.html