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社區】