# 批量上传
本示例用于批量上传文件。
```
// 认证用的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()
```
![](https://support.huaweicloud.com/sdk-browserjs-devg-obs/public_sys-resources/note_3.0-zh-cn.png)
- 使用**SourceFile参数**指定待上传的文件，其必须是File对象或者Blob对象，例如在HTML页面中使用类型为"file"的input标签指定待上传的文件：\<input type="file" id="input-file"/\>。
- **SourceFile参数** 和**Body参数**不能同时使用。
- 上传的内容大小不能超过5GB。
 
![](https://support.huaweicloud.com/sdk-browserjs-devg-obs/public_sys-resources/notice_3.0-zh-cn.png)
- 浏览器必须支持window.File特性，否则无法正常使用文件上传功能；
- 请参考[不支持window.File的浏览器上传文件问题](https://support.huaweicloud.com/sdk-browserjs-devg-obs/obs_24_0302.html#obs_24_0302__section15692195419233)，解决不支持window.File的浏览器上传文件的问题；