vue如何做文件上传

在Vue中，你可以使用<input type="file">元素来实现文件上传功能。以下是一个简单的文件上传示例：

在Vue组件中添加一个<input type="file">元素：

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

在Vue组件的methods中编写上传文件的逻辑：

methods: {
  uploadFile(event) {
    this.file = event.target.files[0]; // 获取选择的文件
  },
  submit() {
    const formData = new FormData(); // 创建FormData对象
    formData.append('file', this.file); // 将文件添加到FormData对象中，'file'为后端接口接收文件的字段名

    // 发送文件上传请求
    axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 设置请求头为multipart/form-data
      }
    }).then(response => {
      // 处理上传成功的响应
      console.log(response.data);
    }).catch(error => {
      // 处理上传失败的错误
      console.log(error);
    });
  }
}

以上代码假设你已经使用了axios库来发送HTTP请求。你也可以根据你使用的HTTP库来调整代码。

这样，当用户选择文件后，文件将被保存在Vue组件的file数据属性中。当用户点击上传按钮时，文件将被发送到后端接口进行处理