vue怎么实现文件上传后回显

这篇文章主要讲解了“vue怎么实现文件上传后回显”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现文件上传后回显”吧！

一、上传文件

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

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

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

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

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

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

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

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

二、回显文件

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

1. 通过组件props传递数据

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

在父组件中：

<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>

2. 通过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>