Vue封装一个简单轻量的上传文件组件的示例

下面是Vue封装一个简单轻量的上传文件组件的示例：

1. 实现思路

• 在父组件中使用<input type="file">标签，然后监听change事件。
• 将上传文件的操作交给上传文件组件，上传文件组件通过监听父组件传递的file事件来实现上传操作。
• 在上传文件组件中创建一个<input type="file">标签，并在相应的事件中使用FormData对象构建文件内容，并使用axios.post()方法发送文件内容到后台。

2. 示例说明

示例 1

通过<input type="file">标签，在父组件中手动选择上传文件，并且给子组件传递选中的文件信息，然后在子组件中将文件信息再次处理并上传。

<!-- 父组件 template -->
<template>
  <div>
    <input type="file" @change="fileChanged">
    <upload-component :file="file" @upload-success="uploadSuccess"></upload-component>
  </div>
</template>

<script>
  import UploadComponent from './UploadComponent'

  export default {
    components: {
      UploadComponent
    },
    data () {
      return {
        file: null
      }
    },
    methods: {
      fileChanged (event) {
        this.file = event.target.files[0]
      }
      uploadSuccess (response) {
        console.log('上传成功', response)
      }
    }
  }
</script>

<!-- 子组件 template -->
<template>
  <button @click="uploadFile">上传文件</button>
</template>

<script>
  import axios from 'axios'

  export default {
    props: {
      file: {
        required: true,
        type: Object
      }
    },
    methods: {
      async uploadFile () {
        const formData = new FormData()
        formData.append('file', this.file)
        try {
          const response = await axios.post('/api/upload', formData)
          this.$emit('upload-success', response)
        } catch (error) {
          console.log('上传失败', error)
        }
      }
    }
  }
</script>

示例 2

封装通用的上传文件组件，支持文件类型限制、文件大小限制等配置。

<!-- 上传文件组件 template -->
<template>
  <div>
    <input type="file" ref="fileInput" @change="fileChanged">
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        formData: new FormData(),
        fileName: '',
        fileSize: 0
      }
    },
    props: {
      accept: {
        default: '',
        type: String
      },
      maxFileSize: {
        default: 5 * 1024 * 1024,
        type: Number
      },
      allowFileTypes: {
        default: ['jpg', 'jpeg', 'png', 'gif'],
        type: Array
      }
    },
    methods: {
      fileChanged (event) {
        const fileList = event.target.files
        if (fileList.length === 0) {
          return
        }
        const file = fileList[0]
        this.fileName = file.name
        this.fileSize = file.size
        const fileType = this.getFileType(file.name)
        if (this.allowFileTypes.indexOf(fileType) === -1) {
          alert('不支持该文件类型')
          this.$refs.fileInput.value = ''
          return
        }
        if (this.fileSize > this.maxFileSize) {
          alert('文件过大')
          this.$refs.fileInput.value = ''
          return
        }
        this.formData.append('file', file)
      },
      getFileType (fileName) {
        const index = fileName.lastIndexOf('.')
        if (index === -1) {
          return ''
        }
        return fileName.substr(index + 1, fileName.length)
      },
      async uploadFile () {
        try {
          const response = await axios.post('/api/upload', this.formData)
          this.$emit('upload-success', response)
        } catch (error) {
          console.log('上传失败', error)
        }
      }
    }
  }
</script>

以上就是Vue封装一个简单轻量的上传文件组件的攻略，希望能够帮到你！