前端实现上传和下载功能

最新推荐文章于 2024-07-06 10:46:46 发布

Sokachlh

最新推荐文章于 2024-07-06 10:46:46 发布

阅读量267

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46031207/article/details/130425493

版权

文章介绍了如何在前端实现文件上传和下载的功能。对于上传，通过创建表单，监听文件选择事件，构造FormData并使用Fetch发送POST请求到后端。对于下载，创建按钮，点击后发送请求获取文件流，然后利用blob创建链接触发下载。

摘要由CSDN通过智能技术生成

前端实现上传和下载功能

实现上传功能
在前端页面上创建一个表单，可以使用标签。
监听文件选择事件，获取用户选择的文件对象。
构造FormData对象，并将文件对象添加到FormData中。
使用Fetch或XMLHttpRequest发送请求到后端接口，并将FormData对象作为请求参数传递给后端。
示例代码如下（以Fetch为例）：

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', async () => {
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  
  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  });
  
  const result = await response.json();
  console.log(result);
});

实现下载功能
在前端页面上创建一个按钮，绑定下载事件。
发送请求到后端接口，请求需要下载的文件。
服务器返回二进制流数据，前端进行下载操作。
示例代码如下（以Fetch为例）：

const downloadButton = document.querySelector('#download');

downloadButton.addEventListener('click', async () => {
  const response = await fetch('/download');
  const blob = await response.blob();
  
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'file.txt';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});