Skip to content

ztygod/file-upload-demo

Repository files navigation

tainyi-file-upload-demo

我们在这里进行大文件上传使用的是分片上传的思路:

  1. 首先在页面中添加一个input的标签,用来选中我们要传输的大文件,再添加一个交互按钮,让用户来点击进行上传。
  2. 在input和button标签中,我们绑定两个事件,分别来读取文件的信息(const [file] = e.target.files),还有就是实现上传文件

屏幕截图 2024-05-19 212807.png

  1. 此外,我们用原生XMLHttpRequest,封装请求函数,固定请求方式为POST。

屏幕截图 2024-05-19 213427.png

  1. 在实现文件上传的函数中,我们分别调用了createChunkList(用于实现函数切片),uploadChunks(用于设置FormData),同时又在uploadChunks发送完所有请求时调用mergeRequest(发送合并请求),这是前端部分。
  2. 在后端部分中我们需要引入两个库
const fse = require("fs-extra")
const multiparty = require("multiparty")

分别用于对文件的控制,如创建读写流,还有就是对FormData的解析
屏幕截图 2024-05-19 214229.png

  1. 在后端中我们开启一个http服务,首先解决跨域,设置响应头和预请求

屏幕截图 2024-05-19 214414.png

  1. 再设置两个路由,分别对接受切片和合并切片进行处理,在合并切片中,我们先得到传过来的文件名和文件大小,再进行合并操作,在合并操作中我们先进行文件切片的排序,再进行创建文件读取流和写入流来进行合并,最终实现功能。

About

大文件切片上传的demo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published