使用vue实现文件上传和下载功能

文件上传和下载是 Web 开发中常用的功能之一，Vue.js 作为前端框架，可以很方便地实现这些功能。下面是一个简单的示例：

## 文件上传

首先，我们需要在 Vue 组件中定义一个表单，让用户可以选择要上传的文件：

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

在 `input` 标签中，我们绑定了 `@change` 事件，当用户选择文件时，会触发该事件，调用 `handleFileUpload` 方法。在 `button` 标签中，我们绑定了 `@click` 事件，当用户点击“上传”按钮时，会触发该事件，调用 `uploadFile` 方法。

接着，在 Vue 组件中定义 `handleFileUpload` 方法，将上传的文件保存在组件的 `file` 属性中：

<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);
      // 发送请求上传文件
    }
  }
};
</script>

在 `handleFileUpload` 方法中，我们通过 `event.target.files[0]` 获取到用户选择的文件，然后将其保存在组件的 `file` 属性中。在 `uploadFile` 方法中，我们使用 `FormData` 对象创建一个表单，并将 `file` 属性添加到表单中，然后发送请求上传文件。

## 文件下载

文件下载通常需要在后端实现，前端只需要提供一个下载链接，当用户点击这个链接时，后端会将文件发送给用户。在 Vue 组件中，我们可以使用 `a` 标签来定义下载链接：

<template>
  <div>
    <a :href="downloadUrl" download>下载</a>
  </div>
</template>

在 `a` 标签中，我们绑定了 `:href` 属性，将其值设置为一个计算属性 `downloadUrl`，同时添加了 `download` 属性，表示下载链接。接着，在 Vue 组件中定义 `downloadUrl` 计算属性：

<script>
export default {
  computed: {
    downloadUrl() {
      return '/api/download/' + this.filename;
    }
  }
};
</script>

在 `downloadUrl` 计算属性中，我们返回一个下载链接，其中 `filename` 是要下载的文件名。这个链接应该与后端实现的下载接口对应。

以上就是使用 Vue 实现文件上传和下载功能的示例。需要注意的是，这只是一个简单的示例，实际应用中还需要考虑更多的细节，例如文件类型、文件大小、上传进度等。