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封装一个简单轻量的上传文件组件的攻略,希望能够帮到你!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue封装一个简单轻量的上传文件组件的示例 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue跳转页面打开新窗口,并携带与接收参数方式

    在Vue中,我们可以通过router实例和router-link标签来实现页面跳转。当需要在新窗口中打开一个页面并携带参数时,可以使用window.open方法和URLSearchParams对象来实现。 以下是其中一种实现方式的代码: <template> <!–使用router-link标签指定跳转到新页面的路径–> <…

    Vue 2023年5月27日
    00
  • VUE render函数使用和详解

    VUE render函数使用和详解 什么是render函数? Vue.js 是一个数据驱动的 web 框架。其核心思想是将页面上的 DOM 和数据绑定在一起,当数据变化时,就会自动更新 DOM 以保证页面内容的及时更新。 Vue.js 默认使用 template 语法来声明页面结构,但是在某些情况下,我们可能需要手动渲染页面结构。这个时候,就需要用到 Vue…

    Vue 2023年5月27日
    00
  • vue项目在打包时,如何去掉所有的console.log输出

    在 Vue 项目中,我们通常使用 webpack 进行打包,可以通过插件和配置的方式来去除 console.log 输出。 下面提供两种常见的方法: 方法一:使用插件 webpack 插件 babel-plugin-transform-remove-console 可以在打包时移除所有 console.log 输出。 安装 babel-plugin-tran…

    Vue 2023年5月28日
    00
  • web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu解决

    当Vue前端页面在使用axios进行数据请求时,经常会出现Uncaught (in promise) TypeError的报错信息。这个错误通常是由于在Vuex中获取数据时,出现了异步请求和数据加载的问题。下面给出一个完整的攻略来解决这个问题。 查看报错信息 首先,我们需要仔细查看报错信息,找出报错的具体位置以及错误类型。出现这个错误时,通常会给出错误的具体…

    Vue 2023年5月28日
    00
  • vue 判断两个时间插件结束时间必选大于开始时间的代码

    下面我来详细讲解一下vue判断两个时间插件结束时间必选大于开始时间的代码的实现攻略。 1. 准备工作 首先,我们需要在Vue项目中安装并引入moment.js库,用于操作日期时间。 // 安装moment.js npm install moment –save // 在Vue组件中引入moment.js import moment from ‘moment…

    Vue 2023年5月28日
    00
  • 详解vue-meta如何让你更优雅的管理头部标签

    下面是详解vue-meta如何让你更优雅的管理头部标签的攻略。 什么是vue-meta? vue-meta 是在Vue中操作头部标签(meta 标签、title 标签等等)的一个插件。通过 vue-meta 可以让我们在 Vue 组件内方便的定义和修改这些标签。使用 vue-meta ,我们可以更加方便和优雅的管理头部标签,从而使得我们的网站更加 SEO 友…

    Vue 2023年5月28日
    00
  • Vue通过Blob对象实现导出Excel功能示例代码

    Vue通过Blob对象实现导出Excel功能示例代码 在前端开发中常常需要将数据导出为Excel表格,那么在Vue中如何通过Blob对象实现导出Excel功能呢?本文将提供一份完整的攻略供大家参考。 步骤一:安装依赖 我们需要安装两个依赖,分别是xlsx和file-saver,前者用于生成Excel文件,后者用于保存Excel文件。我们可以使用npm来进行安…

    Vue 2023年5月27日
    00
  • Vue项目部署后提示刷新版本的实现代码

    当我们部署 Vue 项目时,通常情况下,部署完成后用户需要手动刷新页面才能加载最新版本。为了提供更好的用户体验,我们可以使用一些方法来实现自动刷新页面的功能。以下是一些实现方法的示例说明。 方法一:添加版本号 第一种方法是通过添加版本号到静态资源文件来实现自动刷新页面。具体实现步骤如下: 在 Vue 项目中的 index.html 文件中添加版本号到静态资源…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部