首页 > 其他分享 >编写简单的button配合input实现上传文件操作

编写简单的button配合input实现上传文件操作

时间:2023-01-23 20:33:57浏览次数:37  
标签:files color button let file input 上传

<template>
	<button>
        导入文件
        <input type="file" @change="fileChange" accept=".*" :disable="disable"/>
    </button>
</template>
<script>
    data(){
        return{
            disable: false
        }
    }
    methods: {
        fileChange(event){
            // 文件处理函数
            let files = event.target.files
            let tempData = new FormData()
            for(let i = 0; i < files.length; i++){
                let file = files[i]
                tempData.append(file.name, file, file.name)
            }
            // 上传请求函数
            ...
        }
    }
</script>
<style>
    button {
        podition: relative;
        overflow: hidden;
        
        input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            font-size: 0;
            cursor: pointer;
        }
        button:disable {
            color: #ccc;
            background-color: #ccc;
            border-color: #aaa;
            cursor: not-allowed;
            
            input {
                cursor: not-allowed;
            }
        }
    }
</style>

标签:files,color,button,let,file,input,上传
From: https://www.cnblogs.com/shallow-dreamer/p/17065484.html

相关文章