vue3上传下载文件

Vue3中处理文件上传和下载通常会利用HTML5的File API以及axios这样的HTTP库。以下是基本步骤：

**文件上传**:

1. 创建一个表单或按钮元素，添加`@change`事件监听器处理文件选择：

   <input type="file" @change="handleFileUpload" />

2. 在`methods`中定义`handleFileUpload`函数：

   methods: {
     handleFileUpload(e) {
       const file = e.target.files[0];
       // 使用axios发送POST请求，将file作为FormData的一部分
       axios.post('/api/upload', new FormData({ file }), {
         onUploadProgress: (progressEvent) => {
           console.log(`百分比: ${Math.round(progressEvent.loaded * 100 / progressEvent.total)}%`);
         }
       });
     }
   }

**文件下载**:

1. 获取文件内容，例如从服务器响应获取：

   axios.get('/api/download', { responseType: 'blob' }).then(response => {
     // response.data 是Blob对象
     const url = URL.createObjectURL(response.data);
     const a = document.createElement('a');
     a.href = url;
     a.download = 'filename';
     a.click();
     // 等待下载完成后删除临时URL
     setTimeout(() => URL.revokeObjectURL(url), 0);
   });