更新时间:2026-06-01 GMT+08:00
批量上传
本示例用于批量上传文件。
// 认证用的ak和sk硬编码到代码中或者明文存储都有很大的安全风险,建议在配置文件或者环境变量中密文存放,使用时解密,确保安全;本示例以ak和sk保存在环境变量中为例,运行本示例前请先在本地环境中设置环境变量AccessKeyID和SecretAccessKey。
// 前端本身没有process对象,可以使用webpack类打包工具定义环境变量,就可以在代码中运行了。
// 您可以登录访问管理控制台获取访问密钥AK/SK,获取方式请参见https://support.huaweicloud.com/usermanual-ca/ca_01_0003.html
const AK = process.env.AccessKeyID
const SK = process.env.SecretAccessKey
// 【可选】如果使用临时AKSK和SecurityToken访问OBS,则同样推荐通过环境变量获取
const security_token= process.env.SecurityToken
// server填写Bucket对应的Endpoint, 这里以华北-北京四为例,其他地区请按实际情况填写。
const server = "https://obs.cn-north-4.myhuaweicloud.com"
// 创建ObsClient实例
var obsClient = new ObsClient({
access_key_id: AK,
secret_access_key: SK,
server: server
});
// 桶名
var bucket = 'examplebucket';
// 上传后的对象前缀
var objectPrefix = 'upload/';
async function putObjects() {
var fileInput = document.getElementById('folder');
var files = fileInput.files;
if (!files || files.length === 0) {
console.log('请选择要上传的文件夹');
return;
}
console.log('开始批量上传,共 ' + files.length + ' 个文件...');
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 保持文件夹结构,使用 relativePath 或 webkitRelativePath
var relativePath = file.webkitRelativePath || file.relativePath || file.name;
var key = objectPrefix + relativePath;
try {
var params = {
Bucket: bucket,
Key: key,
SourceFile: file
};
var result = await obsClient.putObject(params);
if (result.CommonMsg.Status <= 300) {
console.log('[' + (i + 1) + '/' + files.length + '] 成功: ' + relativePath);
} else {
console.log('[' + (i + 1) + '/' + files.length + '] 失败: ' + relativePath + ' - ' + result.CommonMsg.Message);
}
} catch (error) {
console.log('[' + (i + 1) + '/' + files.length + '] 异常: ' + relativePath + ' - ' + error);
}
}
console.log('批量上传完成!');
}
putObjects()
- 使用SourceFile参数指定待上传的文件,其必须是File对象或者Blob对象,例如在HTML页面中使用类型为“file”的input标签指定待上传的文件:<input type="file" id="input-file"/>。
- SourceFile参数和Body参数不能同时使用。
- 上传的内容大小不能超过5GB。
- 浏览器必须支持window.File特性,否则无法正常使用文件上传功能;
- 请参考不支持window.File的浏览器上传文件问题,解决不支持window.File的浏览器上传文件的问题;
父主题: 上传对象