码迷,mamicode.com
首页 > Web开发 > 详细

vue项目中解决文件上传 change事件只执行一次的问题

时间:2020-07-03 15:22:57      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:color   sign   def   code   txt   ons   lse   ima   tip   

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事件只执行一次的问题

标签:color   sign   def   code   txt   ons   lse   ima   tip   

原文地址:https://www.cnblogs.com/dafei4/p/13230412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!