Vue.js 中的 `@input` 和 `@change`：文件输入处理指南

在 Vue.js 中使用 @input 和 @change 处理文件输入

前言

当处理 <input type="file" /> 元素的文件输入更改时，Vue.js 中的 @input 和 @change 事件提供了不同的行为。理解它们的细微差别对于优化文件处理流程至关重要。

@input 事件

触发时机：

• 文件选择器打开时
• 多次触发，每次选择或删除一个或多个文件时触发

优点：

• 适用于需要实时监控文件选择更改的情况，例如显示预览或更新进度条。

示例：

<template>
  <input type="file" @input="previewFile" />
</template>

<script>
export default {
  methods: {
    previewFile(event) {
      // 实时预览所选文件...
    },
  },
};
</script>

@change 事件

触发时机：

• 文件选择器关闭时（无论是否选择文件）
• 只触发一次，在文件选择器关闭时触发

优点：

• 适用于只需要处理最终选择文件的情况，例如将其上传到服务器。

示例：

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

<script>
export default {
  methods: {
    uploadFile(event) {
      // 上传所选文件到服务器...
    },
  },
};
</script>

何时使用哪种事件？

根据你的具体需求选择 @input 或 @change 事件：

• 实时监控文件选择更改：@input
• 只处理最终选择的文件：@change

结论

@input 和 @change 事件提供了不同的功能，适用于不同的文件处理场景。根据你的需求选择合适的事件可以优化文件输入流程并简化应用程序开发。

常见问题解答

1. 如何防止 @input 事件多次触发？

在 v-model 中使用 lazy 修饰符可以延迟 @input 事件的触发，直到文件选择器关闭。

2. 如何使用 @change 事件获得多个文件？

使用 multiple 属性允许 input 同时选择多个文件。

3. 如何限制文件大小？

使用 accept 属性指定允许的文件类型和大小限制。

4. 如何显示文件预览？

使用 FileReader API 将所选文件转换为DataURL，并将其分配给图像元素的 src 属性。

5. 如何上传文件？

使用 FormData 对象将文件和必要的数据发送到服务器端点。