原理篇二:大文件分块上传
所有文档

          对象存储 BOS

          原理篇二:大文件分块上传

          原理篇二:大文件分块上传

          用户在使用浏览器上传文件到 BOS 的时候,如果遇到文件过大,需要先将文件分块然后再上传。上传过程中有可能会遇到页面关闭、浏览器崩溃、网络连接中断等问题,从而导致上传失败。BOS 支持分块上传和断点续传功能。分块上传请参见“ Object 的分块上传”,下面介绍“断点续传”的实现方法。

          实现原理

          在我们使用文件分块上传(multipartUpload)的时候, BOS 首先会为这个上传过程分配一个 uploadId 。然后我们将一个文件被分成了若干 part ,每个 part 独立上传,上传完成后,BOS 服务会为这个 part 生成一个 eTag 。当所有 part 都上传完成的时候,BOS 服务根据这些 eTag 和 uploadId 把正确的 part 找出来,并组合成原本的文件。

          在这个过程中,BOS 并不需要所有的 part 一下子全部上传完毕,而是可以分多次进行。这也就是说,上传过程中,当页面意外关闭时,我们可以不必从头开始重新上传,而只需要把未上传成功的 part 的再次上传就可以。当然,前提是我们需要把此次上传的 uploadId 和上传完成的 part 的 etag 保存下来(不过,更推荐的做法是通过 listParts 接口来查询更精确的已上传分块信息)。在上传一个 part 之前,可以先检查一下,这个 part 是否已经上传过了,如果以前已上传成功,那就直接跳过这个 part 的上传过程。

          对于 uploadId 的存储,需要满足不受页面关闭的影响,比较理想的做法是存储在 localStorage 中。

          本地存储

          在保存 uploadId 时,我们需要为它指定一个 key ,让不同的文件、不同的上传过程区分开。本示例采用文件名、文件大小、分区大小、 bucket 名称、 object 名称组合成这个 key :

          var generateLocalKey = function (blob, chunkSize, bucket, object) {
               return [blob.name, blob.size, chunkSize, bucket, object].join('&');
           };

          注意:用这个方式生成的 key 并不准确,如果两次上传过程中,选择了两个文件名相同、文件大小相同,但内容不同的文件,那么用这样的方式并不能正确区分这两个文件。更严谨的方式是根据文件名和文件内容计算 MD5 ,并以此为 key 。

          存储方式我们选择 localStorage :

          var getUploadId = function (key) {
               return localStorage.getItem(key);
           };  
          var setUploadId = function (key, uploadId) {
               return localStorage.setItem(key, uploadId);
           };  
          var removeUploadId = function (key) {
               return localStorage.removeItem(key);
           };

          初始化分块上传

          在初始化分块上传时,有两种可能:

          • 如果已经存在此文件的 uploadId ,那么跳过 initiateMultipartUpload() 方法,改为调用 listParts() 来获取已上传分块信息;
          • 如果没有此文件的 uploadId,那么调用 initiateMultipartUpload() 方法获得新的 uploadId ,并将这个 uploadId 保存在 localStorage 中。
              // ...省略BosClient初始化过程
              // var bosClient = new BosClient(bosConfig);
          
                var initiateMultipartUpload = function (file, chunkSize, bucket, object) {
                   // 根据文件生成localStorage的key
                   var key = generateLocalKey(file, chunkSize, bucket, object);
                    // 获取对应的`uploadId`
                   var uploadId = getUploadId(key);
                    if (uploadId) {
                       // `uploadId`存在,说明有未完成的分块上传。
                       // 那么调用`listParts()`获取已上传分块信息。
                       return BosClient.listParts(bucket, object, uploadId)
                           .then(function (response) {
                               // response.body.parts里包含了已上传分块的信息
                               response.body.uploadId = uploadId;
                               return response;
                           });
                   }
                   else {
                       // `uploadId`不存在,那么用正常的流程初始化
                       return BosClient.initiateMultipartUpload(bucket, object)
                           .then(function (response) {
                               // response.body.uploadId为新生成的`uploadId`
                               response.body.parts = [];
                                // 为了下次能使用断点续传,我们需要把新生成的`uploadId`保存下来
                               setUploadId(key, response.body.uploadId);
                               return response;
                           });
                   }
               }

          分块上传

          在对大文件分割分块时,我们可以跟以上传的分块列表进行比较,以确定是否需要真的进行上传。

              function getEtag(partNumber, parts){
                   // 从已上传part列表中找出特定partNumber的part的eTag
                   for(var i = 0, l = parts.length; i < l; i++){
                       if (parts[i].partNumber === partNumber) {
                           return parts[i].eTag;
                       }
                   }
                   return null;
               }
                function getTasks (file, uploadId, chunkSize, bucket, object, parts) {
                   var leftSize = file.size;
                   var offset = 0;
                   var partNumber = 1;
          
                   var tasks = [];
          
                   while (leftSize > 0) {
                       var partSize = Math.min(leftSize, chunkSize);
                       var task = {
                           file: file,
                           uploadId: uploadId,
                           bucket: bucket,
                           object: object,
                           partNumber: partNumber,
                           partSize: partSize,
                           start: offset,
                           stop: offset + partSize - 1
                       };
          
                        // 如果在已上传完成的分块列表中找到这个分块的etag,那么记录下来
                       var etag = getEtag(partNumber, parts);
                       if (etag){
                           task.etag = etag;
                       }
                        tasks.push(task);
                        leftSize -= partSize;
                       offset += partSize;
                       partNumber += 1;
                   }
                    return tasks;
               }
          
          在进行分块上传处理的时候,根据是否已带有etag字段来决定是否需要上传:
          
              function uploadPartFile(state, bosClient) {
                   return function(task, callback) {
                       if (task.etag) {
                           // 如果有etag字段,则直接跳过上传
                           callback(null, {
                               http_headers: {
                                   etag: task.etag
                               },
                               body: {}
                           });
                       }
                       else {
                           // 否则进行上传
                           var blob = task.file.slice(task.start, task.stop + 1);
                           bosClient.uploadPartFromBlob(task.bucketName, task.key, task.uploadId, task.partNumber, task.partSize, blob)
                               .then(function(res) {
                                   ++state.loaded;
                                  callbacknull,res);
                               })
                               .catch(function(err) {
                                   callback(err);
                               });
                       }
                   };
               }

          流程代码

          我们对每个步骤的代码做了一些小修改,但整个流程的代码与分块上传很类似:

              var chunkSize = 5 * 1024 * 1024; // 分块大小
              var uploadId;
              initiateMultipartUpload(file, chunkSize, bucket, object)
                   .then(function(response) {
                       uploadId = response.body.uploadId; // uploadId,可能是服务器刚刚生成的,也可能是从localStorage获取的
                       var parts = response.body.parts || []; // 已上传的分块列表。如果是新上传,则为空数组
                       var deferred = sdk.Q.defer();
                       var tasks = getTasks(blob, uploadId, chunkSize, bucket, key, parts);
                       var state = {
                           lengthComputable: true,
                           loaded: parts.length, // 已上传的分块数
                           total: tasks.length
                       }; 
                       // 如果已上传的分块数大于0,可以先修改一下文件上传进度
                       bosClient.emit('progress', state);
                       // 为了管理分块上传,使用了async(https://github.com/caolan/async)库来进行异步处理
                       var THREADS = 2; // 同时上传的分块数量
                       async.mapLimit(tasks, THREADS, uploadPartFile(state, bosClient), function(err, results) {
                           if (err) {
                               deferred.reject(err);
                           } else {
                               deferred.resolve(results);
                           }
                       });
                       return deferred.promise;
                   })
                   .then(function(allResponse) {
                       var partList = [];
                       allResponse.forEach(function(response, index) {
                           // 生成分块清单
                           partList.push({
                               partNumber: index + 1,
                               eTag: response.http_headers.etag
                           });
                       }); 
          
                       // 所有分块上传完成后,可以删除对应的`uploadId`了
                       removeUploadId(key, uploadId);
          
                       return bosClient.completeMultipartUpload(bucket, key, uploadId, partList); // 完成上传
                   })
                   .then(function (res) {
                       // 上传完成
                   })
                   .catch(function (err) {
                       // 上传失败,添加您的代码
                       console.error(err);
                   });
          上一篇
          原理篇一:在浏览器中直接上传文件到BOS
          下一篇
          原理篇三:STS临时认证