文件上传后如何回显vue-前端问答-PHP中文网

文件上传后如何回显vue

王林

发布： 2023-05-11 11:16:36

原创

2021人浏览过

文件上传是网站开发中常见的需求之一，而vue作为一款流行的前端框架，也有着自己的一套实现方式。本文将介绍如何在vue中实现文件上传，并在上传完成后进行回显操作。

一、上传文件

Vue中处理文件上传需要用到一个核心组件：input[type='file']。该组件可以让用户选择要上传的文件，并将其转化为二进制数据，方便后续上传操作。

在Vue中，可以通过以下方式实现文件上传：

创建一个input[type='file']标签，并添加change事件监听函数：

<template>
  <div>
    <input type="file" ref="uploadFile" @change="handleUpload"/>
  </div>
</template>

登录后复制

在handleUpload函数中获取用户选择的文件，并将其转化为formData格式：

methods: {
  handleUpload() {
    const file = this.$refs.uploadFile.files[0] // 获取用户选择的文件
    const formData = new FormData() // 创建formData实例
    formData.append('file', file) // 将文件添加到formData中

    // 发送formData到后端进行上传操作
    // ...
  }
}

登录后复制

在上传操作完成后，可以将上传结果存储到Vue实例中，方便进行回显操作。

二、回显文件

立即学习“前端免费学习笔记（深入）”；

在完成文件上传操作后，如何将上传的文件进行回显呢？Vue中有多种实现方式，下面介绍两种常用的方式。

通过组件props传递数据

通过props将上传结果传递给子组件，即可在子组件中进行回显操作。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

在父组件中：

<template>
  <div>
    <input type="file" ref="uploadFile" @change="handleUpload"/>
    <ChildComponent :fileData="fileData"/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      fileData: {}
    }
  },
  methods: {
    handleUpload() {
      const file = this.$refs.uploadFile.files[0] // 获取用户选择的文件
      const formData = new FormData() // 创建formData实例
      formData.append('file', file) // 将文件添加到formData中

      // 发送formData到后端进行上传操作
      // ...

      // 更新fileData
      this.fileData = {
        url: 'http://www.example.com/xxx.png', // 上传成功后的文件url
        filename: 'xxx.png', // 文件名
        size: file.size // 文件大小
      }
    }
  }
}
</script>

登录后复制

在子组件中：

<template>
  <div>
    <img :src="fileData.url">
    <div>{{ fileData.filename }}</div>
    <div>{{ fileData.size }}</div>
  </div>
</template>

<script>
export default {
  props: {
    fileData: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

登录后复制

通过Vue实例$emit方法传递数据

通过Vue实例的$emit方法触发一个事件，将上传结果传递给父组件，然后在父组件中进行回显操作。

在子组件中：

<template>
  <div>
    <input type="file" ref="uploadFile" @change="handleUpload"/>
  </div>
</template>

<script>
export default {
  methods: {
    handleUpload() {
      const file = this.$refs.uploadFile.files[0] // 获取用户选择的文件
      const formData = new FormData() // 创建formData实例
      formData.append('file', file) // 将文件添加到formData中

      // 发送formData到后端进行上传操作
      // ...

      // 触发事件，将上传结果传递给父组件
      this.$emit('uploadFile', {
        url: 'http://www.example.com/xxx.png', // 上传成功后的文件url
        filename: 'xxx.png', // 文件名
        size: file.size // 文件大小
      })
    }
  }
}
</script>

登录后复制

在父组件中：

<template>
  <div>
    <ChildComponent @uploadFile="handleFileData"/>
    <img :src="fileData.url">
    <div>{{ fileData.filename }}</div>
    <div>{{ fileData.size }}</div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      fileData: {}
    }
  },
  methods: {
    handleFileData(data) {
      this.fileData = data
    }
  }
}
</script>

登录后复制

以上是两种实现文件上传和回显的方式，读者可以根据自己的实际需求进行选择。通过以上方法，我们可以在Vue中方便地处理文件上传和回显操作，为网站的开发提供了便捷的支持。

以上就是文件上传后如何回显vue的详细内容，更多请关注php中文网其它相关文章！