前言
这两天在学习阿里云oss上传。踩了不少坑，终于实现了大文件分片、断点续传的功能。这篇文章主要分享学习笔记，希望能给大家一些帮助。先看效果
技术栈
1.前端： react+Ts + axios 上传文件
2.Node部分：定义接口、阿里云 oss
3.socket.io ：实时同步上传进度 特别说明 axios 中 onUploadProgress 只是上传本地文件的进度，不是上传服务器存入的进度，需要socket.io 从服务端实时返回上传进度
环境安装
需进行阿里云oss配置，获取appid、密钥等参数 ↓阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台 以下是创建node服务所需依赖包
// 下载 Koa 模块
npm install koa
// 下载 Koa Router 模块 https://www.npmjs.com/package/koa-Router[包含示例代码]
npm install koa-router
// 下载 @koa/cors 模块
npm install @koa/cors
// 下载 ali-oss 模块
npm install ali-oss
// 下载 koa-body 模块
npm install koa-body
// 下载 socket.io
npm install socket.io
前端部分
前端使用react+Ts，但无论哪种框架，其实业务逻辑是一样的
初始化socket
let userId = localStorage.getItem('userId');
if (!userId) {
userId = new Date().getTime() + '';
localStorage.setItem('userId', userId);
}
let host = 'http://127.0.0.1:3000' const soket = io(host);
soket.on('connect', function(){
console.log('链接了 Connected to server');
});
// 模拟用户登录
soket.emit('login',{
userId
}) soket.on('success', data => {
console.log('success',data)
})文件上传
const upload = async () => {
// FileList 内置接口
const file = (inputRef.current?.files as FileList)[0];
console.log('inputRef', file);
if (!file) {
message.error('没有选择文件');
return;
}
let formData = new FormData();
formData.append('file', file);
let userId = localStorage.getItem('userId') as string
formData.append('userId',userId)
await axios.post(host+'/upload', formData, {
// onUploadProgress 监听的是客户端发送数据的进度，而不是存储服务器的进度。
onUploadProgress: (progressEvent: any) => {
const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`Upload progress: ${percentage}%`, progressEvent);
}
});
};
进度回显
const [progress,setProgress] = useState<number>(0)
soket.on('uploadding', data => {
console.log('uploadding',data)
setProgress(data)
})node部分
后台使用koa创建node服务，主要分为api接口、阿里云业务函数、socket.io 实时发送上传进度
socket.io
const { createServer } = require("http"); // 导出创建服务的模块函数
const { Server } = require("socket.io"); // 创建socket.io 服务的函数
const httpServer = createServer(app.callback()); // 创建一个http服务实例，app.callback() 作为服务器的请求处理函数
const io = new Server(httpServer, {
cors: {
origin: "*" // 配置socket允许跨越
}
});
上传接口// 上传接口
router.post('/upload', async (ctx, next) => {
let file = ctx.request.files.file;
// 用户id
let userId = ctx.request.body.userId
try {
let result = null;
await next();
// 判断文件大小，超过partSize进行分片上传
if (file.size < partSize) {
console.log('直连操作');
result = await commonUpload(file, userId);
} else {
console.log('分片上传');
result = await multipartUpload(file, userId);
}
ctx.body = {
code: 200,
message: 'success',
data: result
};
} catch (error) {
console.log('error', error);
ctx.body = {
message: '上传失败',
code: 401
};
}
});暂停接口
router.post('/break', async (ctx) => {
let userId = ctx.request.body.userId
// 取出 当前用户的阿里云实例，用于仅关闭当前上传
let itemClient = userList[userId]['client']
if (itemClient) {
itemClient.cancel();
ctx.body = {
code: 200,
message: "暂停成功"
}
} else {
ctx.body = {
code: 401,
message: "暂停失败"
}
}});
继续上传接口
// 继续上传
router.post('/continue', async (ctx) => {
let userId = ctx.request.body.userId
ctx.body = {
code: 200,
message: '已继续上传', };
try {
resumeMultiparUpload(userId)
} catch (error) {
console.log('继续上传报错')
}});
分片上传
// 分片上传
const multipartUpload = async (file, userId) => { try {
let result = await userList[userId].client.multipartUpload(file.originalFilename, file.filepath, {
parallel,
partSize,
progress: (p, checkpoint) => {
onProgress(p, checkpoint, userId)
}
});
return result;
} catch (error) {
console.log('multipartUpload', error)
}
};断点续传
// 断点续传
const resumeMultiparUpload = async (userId) => {
// 获取当前用户分片缓存
try {
let checkpoint = checkpoints[userId]
const { uploadId, file } = checkpoint;
let result = await userList[userId].client.multipartUpload(uploadId, file, {
parallel,// 分片数量
partSize,//分片大小
progress: (p, checkpoint) => {
onProgress(p, checkpoint, userId)
},// 上传进度回调函数
checkpoint // 断点续传缓存目录
});
//上传后，删除切片数据
delete checkpoints[userId]
console.log('result', result)
return result;
} catch (error) {
console.log('error 获取当前用户分片缓存')
}}
进度回显
// 上传进度
const onProgress = async (p, checkpoint, userId) => { // p 进度，checkpoint 当前分片上传数据
let step = Math.floor(p * 100); // 转换为百分比
io.to(userList[userId].socketId).emit('uploadding', step) // 发给当前客户端
// io.emit('uploadding',step) 群发
// 存储分片数据，用户续传
console.log('上传进度', step)
checkpoints[userId] = checkpoint
};socket.io私聊
const userList = {} // 用户数据
const partSize = 1024 * 100; // 每个分片大小(byte) 100kb
const parallel = 3; // 同时上传的分片数
let checkpoints = {}; // 记录上传分片数据，用于断点续传
// oss客户端实例 // socket.io系统事件，监听链接状态
io.on("connection", (socket) => {
// 监听客户端信息数据，存储用户信息 socket.on('login', (data) => {
// 用户未链接oss，进行创建oss实例
if (!userList[data.userId]) { let client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: 'oss-cn-beijing',
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控W制台创建RAM用户。
accessKeyId: 'xxx',
accessKeySecret: 'xx',
bucket: 'xxx
}); // 将socket.id 与用户信息关联存储，方便私聊发送
userList[data.userId] = {
...data,
socketId: socket.id,
client: client
}
console.log('socket.id', socket.id)
console.log('获取到用户数据')
} else { // 已链接oss，进行只更新socket.id
userList[data.userId].socketId = socket.id
}
})
socket.emit('success', '服务端链接成功了')
// socket.io 系统事件-客户端断开监听
socket.on('disconnect', () => {
console.log('客户端断开了')
// io.emit('quit', socket.id)
})
});
纯前端操作部分如无服务端业务要求，建议客户端调用阿里云sdk，实现上传oss功能，操作如node一致，阿里云sdk同样支持分片上传等，最方便的是无需再创建socket获取进度。 兄弟们，点赞收藏过20，下篇文章更新呀Socket 相关api
在Socket.IO 中，客户端和服务端都有一些系统事件。
服务端系统事件：
connection：当客户端与服务器建立连接时触发。可以在此事件中执行与连接相关的操作。
io.on("connection", (socket) => {
// 处理连接事件
});
disconnect：当客户端与服务器断开连接时触发。可以在此事件中执行与断开连接相关的操作。socket.on("disconnect", () => {
// 处理断开连接事件
});
error：当在连接过程中发生错误时触发。可以在此事件中处理连接错误。socket.on("error", (err) => {
// 处理连接错误事件
});
to 在 Socket.IO 中，to 方法用于向特定房间或客户端发送消息。它允许你将消息发送给指定的接收者。to 方法的使用方法如下：io.on('connection', (socket) => {
// 建议 将socket.id 与用户信息关联存储，方便私聊发送
// 向指定客户端发送消息
io.to(socket.id).emit('message', 'Hello from server!');
});
使用 io.to(socket.id).emit('message', 'Hello from server!') 向特定客户端发送消息，其中 socket.id 表示当前客户端的唯一标识符。客户端系统事件：
connect：当客户端成功连接到服务器时触发。该事件仅发生在客户端连接成功时。
socket.on("connect", () => {
// 处理连接成功事件
});
disconnect：当客户端与服务器断开连接时触发。可以在此事件中执行与断开连接相关的操作。socket.on("disconnect", () => {
// 处理断开连接事件
});
error：当在连接过程中发生错误时触发。可以在此事件中处理连接错误。socket.on("error", (err) => {
// 处理连接错误事件
});
注意socket 开启跨越 :::warning http://socket.io 需配置跨越，否则无法链接，参考 https://socket.io/zh-CN/docs/v4/handling-cors/ :::const io = new Server(httpServer, {
cors: {
origin: "http://localhost:8080" // 前端访问地址 、"*" 允许所有跨越
}
});httpServer.listen(3000);
koa+socket使用事项 :::warning 接口后台和socket端口一致情况下，需使用包含socket的服务实例来创建监听，否则socket无法链接 ::: 在koa中使用socket.io 需要创建一个包含socket.io的服务实例，代码示例如下：const app = new (require("koa"))();
const router = require("koa-Router")();
const { createServer } = require("http");
const { koaBody } = require("koa-body");
const {Server} = require('socket.io')
app.use(cors()); // 允许接口跨域
app.use(router.routes());
// 创建socket服务
const httpServer = createServer(app.callback());
const io = new Server(httpServer,{
cors:{
origin:"*" // 允许socket跨域
}
})
io.on('connection', () => {
console.log('服务链接了')
/* … */ });
// 使用包含socket的服务示例，如果使用koa中的app实例，则无法监听socket服务
httpServer.listen(9000, () => {
console.log("koa server listening on port 9000");
});
参考文章：http://blog.ncmem.com/wordpress/2023/10/11/前端大文件上传如何做到刷新续传？/
标签：const,socket,userId,io,刷新,console,上传,续传 From： https://blog.51cto.com/u_14023400/8439859