大文件分片
切片就是为了解决大文件上传时间过长，优化体验。将大文件拆分成多个小文件，依次上传，上传完毕后合并成源文件。
浏览器的 Blob 提供了 slice 方法，可以截取某个范围的数据，而文件上传的 File 就是一种 Blob
前端可以通过 Blob.slice 进行文件拆分，然后就是后端文件合并。
fs 的 createWriteStream 方法支持指定 start，也就是从什么位置开始写入。这样把每个分片按照不同位置写入文件里，就可以完成合并了。
编写常规上传接口
安装 multer 类型
pnpm i @types/multer -D
编写 controller 接收文件
@Post('upload')
@UseInterceptors(FilesInterceptor('files', 20, { dest: 'uploads' }))
uploadFile(@UploadedFiles() files: Express.Multer.File[]) {
return files;
}
安装静态资源访问包
pnpm i @nestjs/serve-static
设置可访问的静态资源
// app.module.ts
@Module({
imports: [
ServeStaticModule.forRoot({
rootPath: join(__dirname, '..', 'client'),
}),
// ...
],
controllers: [AppController],
providers: [AppService],
})
编写请求联调
<body>
<input id="fileControll" type="file" multiple />
</body>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script>
const fileInput = document.querySelector('#fileControll');
fileInput.addEventListener('change', async (event) => {
const files = event.target.files;
const data = new FormData();
// files 是一个伪数组，需转成数组
const f = Array.from(files).forEach((file) => data.append('files', file));
const res = await axios.post('/person/upload', data);
});
</script>
至此，一个最常规的文件上传前后端联调已经完成了。
分片上传
此时是需要做分片的，即前端文件拆分上传，后端文件合并，常规的文件上传是不适用的，需要对其进行改写。
前端文件分片上传
const fileInput = document.querySelector('#fileControll');
const chunkSize = 1000 * 1024; // 1024 就是 1k。*1000 就是每 1000k 拆分
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0]; // 暂时先上传一个文件进行测试
const chunks = [];
let startPos = 0;
while (startPos < file.size) {
chunks.push(file.slice(startPos, startPos + chunkSize));
startPos += chunkSize;
}
chunks.map((chunk, index) => {
const data = new FormData();
data.set('name', file.name + '-' + index);
data.append('files', chunk);
axios.post('/person/upload', data);
});
});
前端分片时，每 1000k 拆分成一份，最终可以看到文件在存储到后端时，拆分成了七份。
后端分片处理
创建分片目录
所有的分片都存储在 uploads 文件夹下，合并时是无法区分哪个分片是属于谁的，此时可以将每次上传的文件分文件夹存储，一个文件一个文件夹。
@Post('upload')
@UseInterceptors(FilesInterceptor('files', 20, { dest: 'uploads' }))
uploadFile(
@UploadedFiles() files: Express.Multer.File[],
@Body() body: { name: string },
) {
const fileName = body.name.match(/(.+)\-\d+$/)[1];
const chunkDir = 'uploads/chunks_' + fileName; // 以文件名为一个分片文件夹
if (!fs.existsSync(chunkDir)) fs.mkdirSync(chunkDir); // 文件夹不存在，创建
fs.cpSync(files[0].path, chunkDir + '/' + body.name); // 将传到 uploads 文件夹下的内容 copy 到 分片文件夹下
fs.rmSync(files[0].path); // 删除 uploads 文件夹下的文件
return files;
}
此时再进行上传
分片目录名冲突
以文件名作为分片目录，造成的结果就是会出现重复目录，即两个相同文件名的分片跑到一个目录下，前端在传入文件名时，可以加上随机数（uuid）等，这样可以避免该问题，当然，后端加也一样。
const randomStr = Math.random().toString().slice(2, 8);
chunks.map((chunk, index) => {
const data = new FormData();
data.set('name', randomStr + '_' + file.name + '-' + index);
// data.set('name', file.name + '-' + index);
data.append('files', chunk);
axios.post('/person/upload', data);
});
后端分片合并
文件分片上传完毕后，可以再发请求让这些文件进行合并，比如传入文件名，让后端找这个文件对应的分片目录进行合并
@Get('merge')
merge(@Query('name') name: string) {
const chunkDir = 'uploads/chunks_' + name; // 根据文件名读取分片目录中的文件
const files = fs.readdirSync(chunkDir);
let startPos = 0;
let count = 0;
files.map((file) => {
const filePath = chunkDir + '/' + file;
const stream = fs.createReadStream(filePath);
stream
.pipe(fs.createWriteStream('uploads/' + name, { start: startPos }))
.on('finish', () => {
// 合并完删除分片文件
count++;
if (count === files.length) {
fs.rm(chunkDir, { recursive: true }, () => {});
}
});
startPos += fs.statSync(filePath).size;
});
return 'merge file success';
}
需要注意的是，传入的文件名必须是上传时的文件名，而不是文件的原本名
OSS 上传（阿里云）
本地存储的文件目录结构
OSS 存储的目录结构，是由桶来存储文件的
购买 阿里云 OSS 云存储
创建 Bucket（桶）
上传一个文件，查看存储再 OSS 中的详细信息
此时在公网环境下就可以访问该图片
通常，生产环境下我们不会直接用 OSS 的 URL 访问，而是会开启 CDN，用网站域名访问，最终回源到 OSS 服务
Node 集成 OSS
阿里云提供了 OSS 的开发文档：Nodejs OSS对象存储
OSS 简单使用
先按照文档进行简单使用
mkdir oss-test
cd oss-test
npm init -y
npm i ali-oss # 安装sdk开发包
在 index.js 中，将官方示例粘贴过来研究
const OSS = require("ali-oss");
const path = require("path");
const client = new OSS({
// yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: "yourregion",
// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
accessKeyId: process.env.OSS_ACCESS_KEY_ID,
accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
// 填写Bucket名称。
bucket: "examplebucket",
});
async function put() {
try {
// 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
// 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
const result = await client.put(
"login.png",
path.normalize("./api-login.2fcc9f35.jpg")
);
console.log(result);
} catch (e) {
console.log(e);
}
}
put();
文档代码中给出的解释，依次去寻找参数来源。
region，bucket 所在区域
accessKeyId和accessKeySecret，访问凭证/私钥
bucket就是自己创建的Bucket名称
参数都了解并完善之后执行代码，此时再去查看 OSS 的文件列表，就可以发现多了个文件。
使用 RAM 子用户 AccessKey
在点击进入 AccessKey 管理时，每次都会弹出以下内容，提示 AccessKey 不安全，让使用子用户 AccessKey
那就创建子用户 AccessKey
创建完成之后，将代码中已有的凭证替换成新的
此时执行代码，会出现无权限的报错提示，需要开通权限
开通权限
此时再次运行代码就可以了。
RAM 子用户的好处就是，就算 accessKey 泄露，由于有权限分配，可以直接解除该主体的 accessKey 访问权限
授权给第三方上传
授权第三方上传出现的原因是：
- 前端经过服务器，服务器再转存到 OSS，消耗服务器资源
- 前端直接传给 OSS，增加 accessKey 暴露风险
基于以上两点，给出的两全其美的解决方法就是授权给第三方上传，此处可查看 文档
Node 版获取临时签名完整代码，部分代码也可查看 文档
const express = require("express");
const moment = require("moment");
const { Buffer } = require("buffer");
const OSS = require("ali-oss");
const app = express();
const path = require("path");
const config = {
accessKeyId: "accessKeyId",
accessKeySecret: "accessKeySecret",
bucket: "bucket",
callbackUrl: "url", //
dir: "prefix/", // OSS文件的前缀
};
app.get("/", async (req, res) => {
const client = new OSS(config);
const date = new Date();
date.setDate(date.getDate() + 1);
const policy = {
expiration: date.toISOString(), // 请求有效期
conditions: [
["content-length-range", 0, 1048576000], // 设置上传文件的大小限制
// { bucket: client.options.bucket } // 限制可上传的bucket
],
};
// 跨域才设置
res.set({
"Access-Control-Allow-Origin": req.headers.origin || "*",
"Access-Control-Allow-Methods": "PUT,POST,GET",
});
//签名
const formData = await client.calculatePostSignature(policy);
//bucket域名
const host = `http://${config.bucket}.${
(await client.getBucketLocation()).location
}.aliyuncs.com`.toString();
//回调
const callback = {
callbackUrl: config.callbackUrl,
callbackBody:
"filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}",
callbackBodyType: "application/x-www-form-urlencoded",
};
//返回参数
const params = {
expire: moment().add(1, "days").unix().toString(),
policy: formData.policy,
signature: formData.Signature,
accessid: formData.OSSAccessKeyId,
host,
callback: Buffer.from(JSON.stringify(callback)).toString("base64"),
dir: config.dir,
};
res.json(params);
});
//接收回掉
app.post("/result", (req, res) => {
//公钥地址
const pubKeyAddr = Buffer.from(
req.headers["x-oss-pub-key-url"],
"base64"
).toString("ascii");
//判断
if (
!pubKeyAddr.startsWith("https://gosspublic.alicdn.com/") &&
!pubKeyAddr.startsWith("https://gosspublic.alicdn.com/")
) {
System.out.println("pub key addr must be oss addrss");
res.json({ Status: "verify not ok" });
}
res.json({ Status: "Ok" });
});
app.listen(9000, () => {
console.log("http://localhost:9000");
console.log("App of postObject started.");
});
运行得到的结果大概如图所示
经过以上步骤，上传 OSS 的地址 host，用的临时 signature 和 policy 都有了，此时就能让前端直接使用临时签名上传。
前端使用临时签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="file" id="fileControll" />
</body>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script>
const fileInput = document.querySelector("#fileControll");
// 调用服务端的提供临时凭证接口
async function getOSSInfo() {
return {
expire: "1710427719",
policy: "eyJleHBpcmF0aW9uIjoiMjAyNC0wMy0xNFQxNDo0ODozOC42MDRaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==",
signature: "ncnYb+6AsWVquMzYJuDVJPOG3Y8=",
accessid: "LTAI5tMSeQWSbHF4Ky9QmDV4",
host: "http://jsonq.oss-cn-beijing.aliyuncs.com",
callback: "eyJjYWxsYmFja1VybCI6InVybCIsImNhbGxiYWNrQm9keSI6ImZpbGVuYW1lPSR7b2JqZWN0fSZzaXplPSR7c2l6ZX0mbWltZVR5cGU9JHttaW1lVHlwZX0maGVpZ2h0PSR7aW1hZ2VJbmZvLmhlaWdodH0md2lkdGg9JHtpbWFnZUluZm8ud2lkdGh9IiwiY2FsbGJhY2tCb2R5VHlwZSI6ImFwcGxpY2F0aW9uL3gtd3d3LWZvcm0tdXJsZW5jb2RlZCJ9",
dir: "prefix/",
};
}
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
const ossInfo = await getOSSInfo();
const formdata = new FormData();
formdata.append("key", file.name);
formdata.append("OSSAccessKeyId", ossInfo.accessid);
formdata.append("policy", ossInfo.policy);
formdata.append("signature", ossInfo.signature);
formdata.append("success_action_status", "200"); //让服务端返回200,不然，默认会返回204
formdata.append("file", file);
const res = await axios.post(ossInfo.host, formdata);
if (res.status === 200) {
const img = document.createElement("img");
img.src = ossInfo.host + "/" + file.name;
document.body.append(img);
alert("上传成功");
}
});
</script>
</html>
此时上传是有跨域限制的，有条件的情况下可以希望在项目的本地做proxy代理，此处直接让 OSS 允许跨域请求
点击上传即可
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。