在现代的 Web 应用程序中，文件上传和下载是常见的功能之一。Vue.js 是一个流行的 JavaScript 框架，它提供了一种简单而强大的方式来构建交互式的用户界面。本文将介绍如何使用 Vue.js 结合 vue-file-upload 和 axios 库实现文件上传和下载功能。
准备工作
在开始之前，我们需要确保已经安装了 Vue.js 和 axios。可以通过以下命令来安装它们：
npm install vue axios另外，我们还需要安装 vue-file-upload。可以通过以下命令来安装：
npm install vue-file-upload文件上传
首先，让我们来实现文件上传功能。我们将使用 vue-file-upload 来处理文件上传的逻辑。以下是一个简单的示例：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
import { VueFileUpload } from 'vue-file-upload';
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);
// 使用 axios 发送文件上传请求
axios.post('/upload', formData)
.then(response => {
console.log('文件上传成功！');
})
.catch(error => {
console.error('文件上传失败：', error);
});
}
}
}
</script>在上面的代码中，我们使用了 vue-file-upload 组件来创建一个文件选择框和一个上传按钮。当用户选择文件后，handleFileUpload 方法会将文件保存到组件的 file 数据属性中。然后，当用户点击上传按钮时，uploadFile 方法会创建一个 FormData 对象，并将文件添加到其中。最后，我们使用 axios 发送文件上传请求到服务器。
请注意，上述示例中的 /upload 是一个示意的上传接口地址，您需要根据实际情况进行相应的修改。
文件下载
接下来，我们将实现文件下载功能。使用 axios 可以轻松地从服务器下载文件。以下是一个简单的示例：
<template>
<div>
<button @click="downloadFile">下载</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile() {
// 使用 axios 发送文件下载请求
axios.get('/download', { responseType: 'blob' })
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.txt');
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error('文件下载失败：', error);
});
}
}
}
</script>在上面的代码中，我们使用了一个简单的按钮来触发文件下载操作。当用户点击按钮时，downloadFile 方法会使用 axios 发送一个 GET 请求到服务器，并设置 responseType 为 blob。然后，我们将获取到的文件数据创建成一个 URL，并通过创建一个 <a> 标签来模拟点击下载链接，最后将该链接添加到页面上。
同样地，上述示例中的 /download 是一个示意的下载接口地址，您需要根据实际情况进行相应的修改。
总结
通过结合 Vue.js、vue-file-upload 和 axios，我们可以轻松地实现文件上传和下载功能。在本文中，我们介绍了如何使用这些工具来处理文件上传和下载的逻辑，并提供了简单的示例代码。希望本文对您有所帮助！
注意：本文中的示例代码仅供参考，请根据实际情况进行相应的修改和调整。
