vue实现文件上传功能

Vue.js可以实现文件上传功能。以下是一个简单的示例：

1. 首先，在模板中添加一个文件上传的input元素：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

2. 在Vue实例中，定义处理文件上传的方法：

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.selectedFile);

      // 发送POST请求至服务器
      // 使用axios或其他HTTP库发送请求
      // 示例：axios.post('/upload', formData)
      //       .then(response => {
      //         // 处理上传成功的逻辑
      //       })
      //       .catch(error => {
      //         // 处理上传失败的逻辑
      //       });
    }
  }
};
</script>

在上述代码中，`handleFileUpload`方法会在文件选择发生变化时触发，将选中的文件存储在`selectedFile`变量中。`uploadFile`方法会创建一个FormData对象，将选中的文件添加到FormData中，并发送POST请求至服务器。

请注意，实际的文件上传操作需要与服务器端进行配合，确保服务器端能够