vue实现自定义文件上传组件

思路： 实现input标签的change事件,我们在其中获取用户选中的文件（可以多个），将用户的文件信息赋值给我们事先在vue对象定义的data的files(数组)属性，用插值表达式把data的files属性显示到页面。

html部分(写在template里面，注意只能有一个根节点)

	<div class="fileContainer" > 
	  //选择文件的框
      <input class="choiceFileInput"  type="file" ref="clearFile" @change="getFile($event)" multiple="multiple"  />
      	//列表显示选择的文件
         <ul class="fileul">
             <li class="fileli" v-for="(file,index) in files" :key="file.id">{{file.name}}
                 <button class="deletebtn" @click="deletefile(index)">删除</button>
             </li>
         </ul>
         <button @click="submit">提 交</button>
    </div>

js部分

<script>
export default {
    data() {
        return {
            files:[], //将用户选择的文件赋值给它，渲染在页面
        }
    },
    methods:{
        //多文件上传
        //获取文件
        getFile(event){
            //console.log(event);
            let files = event.target.files;
            console.log("待上传的文件信息");
            console.log(files);
            //将用户选中的文件赋值给data的files
            for(let i=0; i<files.length; i++){
                this.files.push(files[i]);
            }
        },
        //删除文件
        deletefile(index){
            console.log(index);
            this.files.splice(index,1);
            console.log(this.files);
        },
        //提交
        submit(){
        	//在这里将文件发送给后端，this.files就是用户选择的文件，一个数组
            console.log(this.files);
        },
    }
}

</script>

css样式部分

<style scoped>
.fileContainer {
    width:300px;
    text-align:left;
}  
.choiceFileInput {
    width: 70px;
    padding: 15px;
}
.fileul {
    list-style-type: none;
}
.fileli {
    font-size:14px;
    min-height:30px;
}
.deletebtn {
    float: right;
    border: none;
}
</style>

效果图（样式写得比较丑，请根据自己的需求进行设计）