vue3 的 input 怎么上传file

在 Vue 3 中，上传文件需要使用 input 标签的 type 属性设置为 "file"，然后在上传文件时可以使用 FormData 对象来包含文件数据和其他表单数据，然后使用 axios 或者其他 HTTP 库将数据发送到服务器。

以下是一个示例代码：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="upload">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async upload() {
      const formData = new FormData();
      formData.append('file', this.file);
      try {
        const response = await axios.post('/api/upload', formData);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

在上面的代码中，我们首先定义了一个 input 标签，当用户选择文件时，会触发 onFileChange 方法，将文件保存在组件的 data 中。

然后，在 upload 方法中，我们创建了一个 FormData 对象，将文件添加到其中，并使用 axios 发送 POST 请求到服务器的 /api/upload 地址。服务器可以从请求中获取文件数据，并对其进行处理。