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

Vue 实现上传文件和下载文件的功能通常会涉及到前端的表单操作、文件管理以及后端接口的调用。以下是基本步骤：

**上传文件（File Upload）：**
1. 使用`<input type="file">`元素让用户选择文件，可以绑定`@change`事件监听文件变化。

<input type="file" @change="handleFileUpload($event)">

2. 在`methods`里定义`handleFileUpload`函数，读取文件内容并发送到后端API。

methods: {
  handleFileUpload(e) {
    const file = e.target.files[0];
    // 创建FormData对象
    const formData = new FormData();
    formData.append('file', file);
    
    // 发送POST请求到服务器
    axios.post('/api/upload', formData)
      .then(response => console.log(response))
      .catch(error => console.error(error));
  }
}

**下载文件（File Download）：**
1. 后端提供一个支持`GET`请求的下载链接或数据流。
2. 使用`axios`或者其他库的`get`方法，设置 responseType 为 'blob' 或 'arraybuffer' 来接收二进制数据。

downloadFile() {
  axios.get('/api/download', { responseType: 'blob' })
    .then(response => {
      let url.createObjectURL(response.data); // 可能需要浏览器支持
      window.open(url, '_blank'); // 打开新窗口下载
    })
    .catch(error => console.error(error));
}