vue vue怎么做上传文件

在Vue中实现文件上传的方式有很多种，其中一种常用的方法是使用`<input type="file">`元素结合`FormData`对象进行上传。

首先，在你的Vue组件中，需要添加一个文件选择的输入框：

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

接下来，在组件的`methods`中，实现文件上传的逻辑：

<script>
export default {
  methods: {
    handleFileUpload() {
      // 获取文件对象
      this.file = this.$refs.fileInput.files[0];
    },
    uploadFile() {
      // 创建FormData对象
      let formData = new FormData();
      // 将文件对象添加到FormData中
      formData.append('file', this.file);

      // 发起上传请求
      // 这里可以使用axios、fetch等库发送请求
      // 以下是使用axios的示例
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // 处理上传成功后的逻辑
      })
      .catch(error => {
        // 处理上传失败后的逻辑
      });
    }
  }
}
</script>

在上述代码中，我们通过`$refs`获取到文件选择输入框，并通过`@change`事件监听用户选择文件的操作。在`handleFileUpload`方法中，我们获取到用户选择的文件对象并保存到组件的`file`属性中。

然后，在`uploadFile`方法中，我们创建一个`FormData`对象，并将文件对象添加到其中。最后，我们使用axios库发送一个POST请求到服务器的`/upload`接口，将FormData作为请求体发送。

注意，在发送请求时，需要设置请求头的`Content-Type`为`multipart/form-data`，以告诉服务器这是一个包含文件的表单请求。

当然，在实际的项目中，你可能需要根据具体的需求对文件上传进行额外的处理，例如文件类型校验、文件大小限制等。以上代码只是一个基本示例，你可以根据自己的实际情况进行修改和扩展。