vue项目中解决文件上传 change事件只执行一次的问题
Posted dafei4
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中解决文件上传 change事件只执行一次的问题相关的知识,希望对你有一定的参考价值。
vue项目中解决文件上传 change事件只执行一次的问题
文件上传第一次上传一个文件后,再次上传这个文件,无法执行change事件,
01) 解决办法,借助v-if
02) 使用 Ant Design Vue 官方的 upload
demo:
<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>
以上是关于vue项目中解决文件上传 change事件只执行一次的问题的主要内容,如果未能解决你的问题,请参考以下文章
Ant Design of Vue 上传文件状态一直为uploading
解决上传文件或图片时选择相同文件无法触发change事件的问题