vue 上传文件代码

以下是一个基本的 Vue 上传文件代码示例：

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

<script>
export default {
  methods: {
    async uploadFile() {
      const formData = new FormData();
      formData.append('file', this.$refs.fileInput.files[0]);
      try {
        const response = await axios.post('/api/upload', formData);
        console.log(response.data);
        alert('上传成功！');
      } catch (error) {
        console.error(error);
        alert('上传失败！');
      }
    }
  }
}
</script>

这个示例中，我们首先在模板中建立了一个 `input` 元素，它的类型是 `file`，并且我们为它设置了一个 `ref` 属性，这样我们就可以在 JavaScript 中通过 `this.$refs.fileInput` 来获取这个元素。

当用户选择了一个文件并点击上传按钮时，我们会触发 `uploadFile` 方法。在这个方法中，我们首先创建了一个 `FormData` 对象，并且将用户选择的文件添加到了这个对象中。然后，我们使用 `axios` 库发送了一个 POST 请求到 `/api/upload` 接口，并将 `FormData` 对象作为请求体发送。如果上传成功，我们在控制台中打印了响应的数据，并弹出一个提示框告诉用户上传成功了；如果上传失败，我们同样在控制台中打印了错误信息，并弹出一个提示框告诉用户上传失败了。

请注意，这个示例中我们假设了 `/api/upload` 接口已经在后端实现了，并且它是一个接受 `multipart/form-data` 类型请求体的接口。你需要根据你的实际情况来修改这个接口的 URL 和实现方式。