Vue 上传文件组件如何封装？

该篇文章仅供初学Vue框架的同窗作一个学习参考。

首先提个问题，咱们为何须要封装一个上传文件组件？

一、浏览器自带的上传文件控件过于很差看。

二、组件封装便于咱们复用，好比限制文件大小只须要向组件传一个值就能够了。

三、便于报错信息的统一处理。

下面咱们就开始作一个上传文件组件吧，分3步走。

一、建立一个Upload.vue组件文件，input绑定change用来监听上传文件事件。

<template>    <div class="upload">        <span>选择文件</span>        <input type="file" :id="id" @change="change">    </div></template>复制代码

二、写样式，就是自定义一个上传组件样式，而后讲input[type="file"]控件作一个隐藏处理。

<style lang="stylus" scoped>.upload {    width: 125px;    height: 40px;    color: #fff; text-align: center; line-height: 40px; background-color: #41b883; border-radius: 4px; position: relative; display: inline-block; input { opacity: 0; position: absolute; left: 0; top: 0; bottom: 0; right: 0; }}</style>复制代码

效果以下：

三、写js，props父组件传来的值，change事件处理，获取上传的文件传给父组件（传完记得把input的value清空，要否则再次上传同一个文件就不会触发change事件）。

<script>export default {    props: {        id: String,    },    methods: {        change() {            let dom = document.getElementById(this.id)            let file = dom.files[0]            this.$emit('uploadFile', file)            dom.value = '';        }    }}</script>复制代码

上传组件就完成了，超级简单吧，下面咱们来看一看父组件如何调用，再来3步。

一、import引入子组件。

import upload from './components/Upload'复制代码

二、向子组件传递Id值，并接受子组件传来的文件数据。

<upload id="file" @uploadFile="uploadFile"></upload>复制代码

三、获取子组件传来的文件数据调用接口传给后台，完成上传流程，父组件代码以下：

<template>  <div id="app">    <upload id="file" @uploadFile="uploadFile"></upload>  </div></template><script>import upload from './components/Upload'export default {  name: 'App',  components: {    upload  },  methods: {    uploadFile(file) {      // 调用接口上传图片      console.log(file, '文件')    }  }}</script>复制代码

至此上传组件从建立到调用的流程就走完了。

后面咱们还能够对组件再进一步封装，好比限制文件大小，增长loading，错误信息的处理等。这些工做就交给各位同窗来完成了。

更多Vue知识请关注公众号【Vue社区】