js直传oss服务器在手机端如何实现大文件上传

要在手机端实现大文件上传至OSS，可以采用分片上传的方式结合客户端直传策略。以下是关键步骤和注意事项：

1. 环境准备：

   • 确保您已创建了OSS Bucket，并获取到AccessKey ID、AccessKey Secret用于身份验证。
   • 为解决跨域问题，需在OSS Bucket中配置跨域访问规则（CORS），允许您的手机应用域名进行跨域请求。

2. 安全授权：

   • 由于直接在客户端使用长期有效的AccessKey和AccessKey Secret存在风险，推荐使用STS（Security Token Service）生成临时凭证。这通常需要您的后端服务介入，通过调用阿里云STS API为前端应用生成一个有限时长且权限受限的临时密钥（包括AccessKeyId, AccessKeySecret, SecurityToken）。

3. 分片上传实现：

   • 利用OSS SDK（例如ali-oss SDK针对JavaScript的版本），您可以实现文件的分片上传。分片上传将大文件分割成多个小块（默认每片大小为1MB至5GB之间），分别上传这些分片，最后再通知OSS合并这些分片为完整的文件。

   // 初始化OSS实例
   var client = new OSS.Wrapper({
    region: '<YOUR_REGION>',
    accessKeyId: '<YOUR_ACCESS_KEY_ID>',
    accessKeySecret: '<YOUR_ACCESS_KEY_SECRET>',
    stsToken: '<YOUR_SECURITY_TOKEN>', // 这里使用从后端获取的STS临时凭证
    bucket: '<YOUR_BUCKET_NAME>'
   });
   
   // 分片上传初始化
   var uploadId = await client.initiateMultipartUpload('<YOUR_OBJECT_KEY>').uploadId;
   
   // 分片上传逻辑
   var partNumber = 1;
   var parts = [];
   var file = document.querySelector('input[type=file]').files[0];
   
   function uploadPart() {
    var chunk = file.slice((partNumber - 1) * PART_SIZE, partNumber * PART_SIZE);
    return client.multipartUpload(uploadId, '<YOUR_OBJECT_KEY>', chunk, { partNumber: partNumber++ })
      .then(result => {
        parts.push({ PartNumber: result.partNumber, ETag: result.etag });
        if (/* 所有分片都已上传 */) {
          completeUpload();
        } else {
          uploadPart(); // 继续上传下一个分片
        }
      });
   }
   
   // 完成分片上传
   function completeUpload() {
    client.completeMultipartUpload(uploadId, '<YOUR_OBJECT_KEY>', parts)
      .then(() => console.log('Upload success'))
      .catch(err => console.error('Upload error', err));
   }
   
   // 开始上传
   uploadPart();
   

4. 优化用户体验：

   • 在上传过程中，考虑实现进度条显示、断点续传功能以提升用户体验。对于断点续传，可以在客户端存储已上传分片的信息，当上传中断时，可以从上次断点继续上传。
   • 注意网络状态变化，如切换Wi-Fi与移动数据时，应能优雅地处理上传任务，避免数据丢失。

5. 错误处理：

   • 实现异常捕获机制，对上传过程中的网络错误、OSS返回的错误码进行处理，并给出用户友好的提示信息。

通过上述步骤，您可以在手机端实现大文件的安全高效上传至OSS服务器。