使用Node.js分片上传大文件到阿里云OSS

阿里云OSS的分片上传（Multipart Upload）是一种针对大文件优化的上传方式，其核心流程和关键特性如下：

1. ‌核心流程‌
分片上传分为三个步骤：

初始化任务‌：调用InitiateMultipartUpload接口创建上传任务，获取唯一标识（Upload ID）。
上传分片‌：通过UploadPart接口并发上传切分后的文件块（Part），每个Part需指定序号（partNumber），但上传顺序不影响最终合并。
合并文件‌：调用CompleteMultipartUpload接口将所有Part按序号合并为完整文件。若中途放弃上传，需调用AbortMultipartUpload清理未完成的Part。

2. 适用场景‌

大文件加速上传‌：文件超过5GB时，分片上传通过并行传输显著提升速度。
网络环境波动‌：单个Part失败仅需重传该部分，避免全文件重传。
暂停与恢复‌：任务无过期时间，可随时中断后继续上传。
未知文件大小‌：如视频监控等场景，可在文件生成过程中开始上传。

3. 技术细节与建议‌

‌分片大小‌：官方建议文件大于100MB时采用分片上传，过小分片可能导致进度显示异常。
并发控制‌：并非并发数越多越快，需权衡网络带宽和设备负载。
‌安全实践‌：浏览器端使用时应通过临时访问凭证（STS）授权，避免暴露主账号密钥。
‌跨域配置‌：浏览器直接上传需预先设置OSS的CORS规则。

4. 操作方式‌

工具支持‌：OSS控制台不支持分片上传，需使用ossbrowser（图形化工具）、ossutil（命令行）或SDK（如Browser.js、阿里云SDK）。
代码示例‌：Vue项目中可通过ali-oss SDK实现分片上传，结合进度条组件（如Element UI）提升用户体验。

5. 注意事项‌

‌碎片清理‌：未完成的分片会占用存储空间，需手动调用AbortMultipartUpload或配置生命周期规则自动清理。
费用影响：未清理的分片会产生存储费用，每月费用 = 分片大小 × 分片数量 × 存储单价 × 存储天数。始终对放弃的上传调用
abortMultipartUpload
自动清理机制：OSS 默认 7 天后清理未完成的分片。可通过生命周期规则缩短：

xml：
<LifecycleConfiguration><Rule><AbortIncompleteMultipartUpload><DaysAfterInitiation>1</DaysAfterInitiation> <!-- 1天后清理 --></AbortIncompleteMultipartUpload></Rule>
</LifecycleConfiguration>

API灵活性‌：若需高度定制化，可直接调用REST API（需自行计算签名）。

一：阿里官方文档：Node.js用一个步骤实现分片上传
二：阿里官方文档：Node.js分三个步骤实现分片上传，可扩展暂停/继续上传和取消上传操作
在这里插入图片描述

一个步骤实现：

以上分片上传完整示例调用的方法multipartUpload中封装了初始化分片上传、上传分片以及完成分片上传三个API接口。如果您希望分步骤实现分片上传，请依次调用.initMultipartUpload、.uploadPart以及.completeMultipartUpload方法。

<template><div class="upload-container"><el-upload ref="upload" drag action="" :auto-upload="false" :on-change="handleFileChange" :limit="1" :on-exceed="handleExceed"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload><el-button style="margin-top: 20px;" type="primary" @click="uploadFile" :disabled="!isupload">开始上传</el-button><el-progress v-if="uploading" :text-inside="true" :stroke-width="26" :percentage="uploadPercentage"></el-progress></div>
</template><script>
import OSS from 'ali-oss'; // npm install ali-oss
import md5 from 'js-md5'; // npm install js-md5
export default {data() {return {file: null,uploading: false,isupload: false,uploadPercentage: 0,};},methods: {handleFileChange(file) {this.file = file.raw;this.isupload = true;},handleExceed() {this.$message.warning('只能上传一个文件');},async uploadFile() {if (!this.file) {this.$message.error('请先选择文件');return;}this.uploading = true;try {let content = this.setConfig(this.$ossConfig);//这里涉及身份识别，我这里是取接口返回在解密获得（如上图），下同，不再解释console.log(content)const client = new OSS({region: content.region,bucket: content.bucket,accessKeyId: content.accessKeyId,accessKeySecret: content.accessKeySecret,stsToken: content.securityToken,});const fileName = `uploads/${this.file.name}`;const options = {partSize: 1024 * 1024 * 5, // 分片大小为 5MBparallel: 3, // 并发上传的分片数量progress: (p, cpt, res) => {this.uploadPercentage = Math.round(p * 100);},};const result = await client.multipartUpload(fileName, this.file, options);this.$message.success('文件上传成功');console.log('Upload result:', result);} catch (error) {this.$message.error('文件上传失败');console.error('Upload error:', error);} finally {this.uploading = false;this.uploadPercentage = 0;}},setConfig(content) {let Base64 = require('js-base64').Base64let str1 = Base64.decode(content.substr(1, 3) + content.substr(5, 3) + content.substr(9, content.length - 9));let contentN = Base64.decode(str1.substr(1, 3) + str1.substr(5, 3) + str1.substr(9, str1.length - 9));return JSON.parse(contentN);},},
};
</script><style scoped>
.upload-container {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ebeef5;border-radius: 4px;
}
</style>

效果：
在这里插入图片描述

扩展：一个步骤扩展暂停/继续上传、取消上传

<template><div class="upload-container"><!-- <el-upload ref="uploadRef" class="upload-demo" drag :action="''" :auto-upload="false" :show-file-list="false" accept="*" :limit="2" :on-change="handleChange" :on-exceed="handleExceed"> --><el-upload ref="uploadRef" class="upload-demo" drag :action="''" :auto-upload="true" :show-file-list="false" accept="*" :limit="1" :before-upload="handleChange"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传3</em></div></el-upload><div v-if="file" class="file-info"><div>文件名称: {{ file.name }}</div><div>文件大小: {{ formatFileSize(file.size) }}</div><div>分片大小: {{ (chunkSize / 1024 / 1024).toFixed(2) }} MB</div><div>分片数量: {{ chunks }}</div></div><el-progress v-if="showProgress && !isUploaded" :percentage="percentage" :status="uploadStatus" :stroke-width="16" style="margin: 20px 0"></el-progress><el-button v-if="isUploaded" type="text">上传成功</el-button><div v-if="showButtons"><!-- <el-button type="primary" @click="submitForm" v-if="!isUploading && !isUploaded && !tempCheckpoint">开始上传</el-button> --><el-button type="primary" icon="el-icon-refresh-left" @click="submitForm" v-if="!isUploading && !isUploaded && !tempCheckpoint">重试</el-button><el-button type="text" @click="shareclearn" v-if="isUploaded">分享 | 清除记录</el-button><el-button type="primary" icon="el-icon-video-pause" @click="pauseUpload()" v-if="paused && isUploading && !isUploaded">暂停上传</el-button><el-button type="primary" icon="el-icon-video-play" @click="resumeUpload()" v-if="!paused && !isUploaded">继续上传</el-button><el-button type="danger" icon="el-icon-circle-close" @click="cancelUpload" v-if="!isUploaded && tempCheckpoint">取消上传</el-button></div></div>
</template><script>
import OSS from 'ali-oss'
import md5 from 'js-md5'export default {data() {return {client: null,parallel: 3, // 并发上传的分片数量chunkSize: 2 * 1024 * 1024, // 分片大小 2MBchunks: 0,// 总分片数量file: null,ossKey: '',uploadStatus: null, // 进度条上传状态percentage: 0, // 进度条百分比showProgress: false,// 是否显示进度条showButtons: false,// 是否显示按钮tempCheckpoint: null, // 用于缓存当前切片内容uploadId: '',isUploading: false,// 是否上传中isUploaded: false,//是否上传完毕paused: true,//是否暂停};},created() {this.initOSSClient();},methods: {async initOSSClient() {try {let content = this.setConfig(this.$ossConfig);console.log(content)this.client = new OSS({region: content.region,bucket: content.bucket,accessKeyId: content.accessKeyId,accessKeySecret: content.accessKeySecret,stsToken: content.securityToken,});} catch (error) {console.error('OSS初始化失败:', error);this.$message.error('上传服务初始化失败');}},setConfig(content) {let Base64 = require('js-base64').Base64let str1 = Base64.decode(content.substr(1, 3) + content.substr(5, 3) + content.substr(9, content.length - 9));let contentN = Base64.decode(str1.substr(1, 3) + str1.substr(5, 3) + str1.substr(9, str1.length - 9));return JSON.parse(contentN);},// 选择文件async handleChange(file) {// console.log(file)this.resetState();this.file = file//.raw;this.ossKey = `uploads/${Date.now()}_${this.file.name}`;this.chunks = Math.ceil(this.file.size / this.chunkSize);this.showButtons = true;this.submitForm();},// 开始上传submitForm() {this.initMultipartUpload();this.multipartUpload();},// 初始化分片上传async initMultipartUpload() {const result = await this.client.initMultipartUpload(this.ossKey);this.uploadId = result.uploadId;console.log(`初始化分片上传成功, uploadId: ${this.uploadId}`);},// 开始分片上传async multipartUpload() {if (!this.file) {this.$message.error('请选择文件');return;}this.uploadStatus = null;this.percentage = 0;this.showProgress = true;this.isUploading = true;try {const result = await this.client.multipartUpload(this.file.name, this.file, {progress: (p, checkpoint) => {this.tempCheckpoint = checkpoint;// this.uploadId = checkpoint.uploadId;this.percentage = Math.floor(p * 100);},parallel: this.parallel,partSize: this.chunkSize,});this.uploadStatus = 'success';this.isUploading = false;this.isUploaded = true;this.$message.success('上传成功');console.log(result, '切片上传完毕');} catch (e) {if (e.code === 'ConnectionTimeoutError') {this.uploadStatus = 'exception';window.addEventListener('online', this.resumeUpload);}this.isUploading = false;console.error(e);}},// 取消上传cancelUpload() {this.pauseUpload();this.paused = true;this.showProgress = false;this.percentage = 0;this.uploadStatus = null;this.tempCheckpoint = null;this.uploadId = '';},// 暂停上传pauseUpload() {this.isUploading = false;this.paused = false;this.client.cancel();},// 继续上传async resumeUpload() {if (!this.tempCheckpoint) {this.$message.error('请先上传');return;}this.uploadStatus = null;this.isUploading = true;this.paused = true;try {const result = await this.client.multipartUpload(this.file.name, this.file, {progress: (p) => {this.percentage = Math.floor(p * 100);},checkpoint: this.tempCheckpoint,});this.uploadStatus = 'success';this.isUploading = false;this.isUploaded = true;this.$message.success('续传成功');console.log(result, '恢复上传完毕');} catch (e) {this.isUploading = false;console.error(e);}},// 重置resetState() {this.file = null;this.ossKey = '';this.uploadStatus = null;this.percentage = 0;this.showProgress = false;this.showButtons = false;this.tempCheckpoint = null;this.uploadId = '';this.isUploading = false;this.isUploaded = false;this.paused = true;},// 限制上传一个文件，重新选择文件替换原来的文件handleExceed(files) {// console.log(this.$refs.uploadRef)if (this.$refs.uploadRef.uploadFiles.length > 1) {this.$refs.uploadRef.uploadFiles.shift();}},// 格式化文件大小formatFileSize(size) {const units = ['B', 'KB', 'MB', 'GB'];let unitIndex = 0;while (size >= 1024 && unitIndex < units.length - 1) {size /= 1024;unitIndex++;}return `${size.toFixed(2)} ${units[unitIndex]}`;},shareclearn() {console.log('分享 | 清除记录')},},
};
</script><style scoped>
.upload-container {width: 100%;max-width: 600px;margin: 0 auto;
}.el-button {margin-right: 10px;
}.file-info {margin: 20px 0;padding: 15px;background-color: #f8f9fa;border-radius: 4px;
}.file-info div {margin-bottom: 10px;color: #606266;
}
</style>

效果：

一个步骤分片上传（扩展暂停继续取消）

三个步骤实现：

<template><div class="upload-container"><!-- multiple drag on-change --><el-upload class="upload-demo" action="" :show-file-list="false" :auto-upload="true" :before-upload="handleFileChange" :accept="'*'"><!-- <i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> --><el-button size="small" type="primary">选择文件</el-button></el-upload><div class="file-info" v-if="file"><div>文件名: {{ file.name }}</div><div>文件大小: {{ formatFileSize(file.size) }}</div><div>分片大小: {{ (chunkSize / 1024 / 1024).toFixed(2) }} MB</div><div>分片数量: {{ chunks }}</div><el-progress v-if="isUploading" :percentage="progressPercent" :status="uploadStatus" :stroke-width="14"></el-progress><div><el-button type="primary" :icon="isPaused?'el-icon-video-play':'el-icon-video-pause'" @click="togglePause" v-if="isUploading">{{ isPaused ? '继续' : '暂停' }}</el-button><el-button type="danger" icon="el-icon-circle-close" @click="cancelUpload" v-if="isUploading">取消</el-button><el-button type="primary" icon="el-icon-refresh-left" @click="startUpload" v-if="!isUploading && !uploaded">重试</el-button><el-button type="text" v-if="!isUploading && uploaded">分享 | 清除记录</el-button></div></div></div>
</template><script>
import OSS from 'ali-oss'
import md5 from 'js-md5'export default {data() {return {file: null,chunkSize: 2 * 1024 * 1024, // 5MB 分片chunks: 0,                  // 分片数量uploadedChunks: [],  // 已上传的分片索引uploadId: '',        // OSS 分片上传 IDclient: null,        // OSS 客户端isPaused: false,     // 是否暂停isUploading: false,  // 上传中uploaded: false,     // 上传完成progressPercent: 0,  // 进度条-百分比uploadStatus: null,  // 进度条-状态concurrency: 3,      // 并发数activeChunks: 0,     // 当前活跃的分片数cancelTokens: {},    // 取消令牌parts: [],           // 分片列表};},created() {this.initOSSClient();},methods: {async initOSSClient() {// 这里应该从后端获取临时凭证（安全考虑）// 以下是模拟数据，实际使用需替换为真实接口const credentials = await this.getSTSToken();this.client = new OSS({region: credentials.region,accessKeyId: credentials.accessKeyId,accessKeySecret: credentials.accessKeySecret,stsToken: credentials.securityToken,bucket: credentials.bucket,refreshSTSToken: async () => {const newCredentials = await this.getSTSToken();return {accessKeyId: newCredentials.accessKeyId,accessKeySecret: newCredentials.accessKeySecret,stsToken: newCredentials.securityToken};}});},async getSTSToken() {// 实际项目中从这里获取STS token// 示例返回结构：var content = this.setConfig(this.$ossConfig);console.log(content)return {region: content.region,bucket: content.bucket,accessKeyId: content.accessKeyId,accessKeySecret: content.accessKeySecret,securityToken: content.securityToken,};},setConfig(content) {let Base64 = require('js-base64').Base64let str1 = Base64.decode(content.substr(1, 3) + content.substr(5, 3) + content.substr(9, content.length - 9));let contentN = Base64.decode(str1.substr(1, 3) + str1.substr(5, 3) + str1.substr(9, str1.length - 9));return JSON.parse(contentN);},// 格式化文件大小formatFileSize(size) {const units = ['B', 'KB', 'MB', 'GB'];let unitIndex = 0;while (size >= 1024 && unitIndex < units.length - 1) {size /= 1024;unitIndex++;}return `${size.toFixed(2)} ${units[unitIndex]}`;},// 标准化ETag格式normalizeETag(etag) {let cleanETag = String(etag).replace(/^"+/, '').replace(/"+$/, '').replace(/\\/g, '');if (!/^[0-9A-F]{32}$/i.test(cleanETag)) {throw new Error(`无效的ETag格式: ${etag}`);}return `"${cleanETag}"`;},// 重置上传resetState() {this.uploadedChunks = [];this.uploadId = '';this.isPaused = false;this.isUploading = false;this.uploaded = false;this.progressPercent = 0;this.uploadStatus = null;this.activeChunks = 0;this.cancelTokens = {};// // 取消所有进行中的请求// Object.values(this.cancelTokens).forEach(ctrl => ctrl.abort());// this.cancelTokens = {};// // 强制更新视图// this.$nextTick();},handleFileChange(file) {// console.log(file)this.resetState();this.file = file;//file.raw;this.chunks = Math.ceil(this.file.size / this.chunkSize);this.startUpload();},// 1、初始化分片上传async startUpload() {if (!this.file) return;try {this.isUploading = true;this.isPaused = false;if (!this.uploadId) {const result = await this.client.initMultipartUpload(this.file.name,{ timeout: 60000 });this.uploadId = result.uploadId;console.log(`初始化分片上传成功, uploadId: ${this.uploadId}`);}// 获取未上传的分片const unuploaded = Array.from({ length: this.chunks }, (_, i) => i).filter(i => !this.uploadedChunks.includes(i));// 并发控制const uploadNext = async () => {if (this.isPaused || !this.isUploading) return;// 上传完，合并分片if (unuploaded.length === 0 && this.activeChunks === 0) {await this.completeUpload();return;}if (this.activeChunks < this.concurrency && unuploaded.length > 0) {const chunkIndex = unuploaded.shift();this.activeChunks++;// 取消步骤一：创建取消令牌，取消正在进行的 HTTP 请求（分片上传请求）const controller = new AbortController();this.cancelTokens[chunkIndex] = controller;// 2、调用上传分片-sthis.uploadChunk(chunkIndex, controller.signal).then((res) => {// console.log(res)// console.log(chunkIndex)// this.parts.push({ partNumber: chunkIndex + 1, etag: res.etag });this.uploadedChunks.push(chunkIndex);this.updateProgress();}).catch(err => {if (err.name !== 'AbortError') {console.error(`分片 ${chunkIndex} 上传失败:`, err);}}).finally(() => {this.activeChunks--;delete this.cancelTokens[chunkIndex];uploadNext();});// 调用上传分片-euploadNext();}};// 启动并发上传for (let i = 0; i < this.concurrency; i++) {uploadNext();}} catch (err) {console.error('上传初始化失败:', err);this.$message.error('上传初始化失败');this.resetState();}},// 2、分片上传async uploadChunk(index, signal) {const start = index * this.chunkSize;const end = Math.min(start + this.chunkSize, this.file.size);const chunk = this.file.slice(start, end);return this.client.uploadPart(this.file.name,this.uploadId,index + 1,chunk,signal,);},// 3、完成上传async completeUpload() {try {// 获取已上传分片列表const listParts = await this.client.listParts(this.file.name,this.uploadId,);// console.log(listParts)// 按分片号排序const sortedParts = listParts.parts.sort((a, b) => a.partNumber - b.partNumber);// console.log(sortedParts)this.parts = await sortedParts.map(p => ({number: Number(p.PartNumber),//！！！注意！！！键名只能用numberetag: this.normalizeETag(p.ETag),//！！！注意！！！键名只能用etag}))// console.log(this.parts)// 完成上传const completeResult = await this.client.completeMultipartUpload(this.file.name,this.uploadId,this.parts,);console.log(completeResult)this.$message.success('完成上传-成功');this.uploadStatus = 'success';this.uploaded = true;this.isUploading = false;} catch (err) {this.uploadStatus = 'exception';console.error('完成上传-失败:', err);this.$message.error('完成上传-失败');}},// 暂停/继续 上传togglePause() {this.isPaused = !this.isPaused;if (!this.isPaused) {this.startUpload();}},// 取消上传 cancelUpload() {this.isUploading = false;// 取消所有正在上传的分片Object.values(this.cancelTokens).forEach(controller => {controller.abort();});// 取消步骤二：清理OSS上传记录，清理掉OSS上存储的所有已经上传的分片，终止本次分片上传过程，并删除所有已上传的分片数据。// 这样确保不会在 OSS 上留下无效的分片数据，避免产生不必要的存储费用。if (this.uploadId && this.file) {try {this.client.abortMultipartUpload(this.file.name, this.uploadId).finally(() => {this.resetState();}).catch((err) => {console.error('取消上传失败:', err)});} catch (err) {console.error('OSS清理异常:', err);}}this.$message.info('上传已取消');// 使用Vue的强制更新视图（针对Element UI进度条）this.$nextTick(() => {this.$forceUpdate();});},// 更新进度条updateProgress() {// 如果不在上传状态，不更新进度if (!this.isUploading) return;const percent = Math.round((this.uploadedChunks.length / this.chunks) * 100);this.progressPercent = Math.min(percent, 100);},}
};
</script><style scoped>
.upload-container {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ebeef5;border-radius: 4px;
}
.upload-demo {width: 300px;margin: 0 auto;
}
.file-info {margin-top: 20px;padding: 15px;background-color: #f8f9fa;border-radius: 4px;
}
.file-info div {margin-bottom: 10px;color: #606266;
}
.el-progress {margin-top: 20px;
}
</style>

效果：

三个步骤分片上传