文件上传是网站开发中常见的需求之一，而vue作为一款流行的前端框架，也有着自己的一套实现方式。本文将介绍如何在vue中实现文件上传，并在上传完成后进行回显操作。
一、上传文件
Vue中处理文件上传需要用到一个核心组件：input[type='file']。该组件可以让用户选择要上传的文件，并将其转化为二进制数据，方便后续上传操作。
在Vue中，可以通过以下方式实现文件上传：
- 创建一个input[type='file']标签，并添加change事件监听函数：
- 在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将上传结果传递给子组件，即可在子组件中进行回显操作。
在父组件中：
在子组件中：
![文件上传后如何回显vue]()
{{ fileData.filename }}{{ fileData.size }}
- 通过Vue实例$emit方法传递数据
通过Vue实例的$emit方法触发一个事件，将上传结果传递给父组件，然后在父组件中进行回显操作。
在子组件中：
在父组件中：
![文件上传后如何回显vue]()
{{ fileData.filename }}{{ fileData.size }}
以上是两种实现文件上传和回显的方式，读者可以根据自己的实际需求进行选择。通过以上方法，我们可以在Vue中方便地处理文件上传和回显操作，为网站的开发提供了便捷的支持。
