使用阿里雲的oss服務在前端進行文件上傳踩過的坑

直接在前端使用阿里雲的oss服務向oss上傳文件有現成的js寫的sdk

項目地址：https://github.com/aliyun-UED/aliyun-sdk-js 

使用js上傳的example地址：https://github.com/aliyun-UED/oss-js-upload

 

使用上面的example中的例子做好相關的配置后可以直接進行文件的上傳操作，但是當文件的上傳大小超過切片大小時，會對改文件進行切片上傳操作，這個時候，文件總是在上傳成功后進行文件的拼接操作時失敗，這個時候注意了，在里面有幾個坑。

 

1.由於是使用的跨域訪問的方式進行的文件上傳操作所以先要設置允許跨域訪問，在oss的訪問規則中添加“Access-Control-Allow-Origin”的訪問權限  response的頭部信息中添加“Access-Control-Allow-Origin”

2.由於是跨域訪問，所以返回后的response的頭部信息中的head的值是無法獲取的，分片上傳時，很重要的一個值ETag是存放在response的head里面的，此時，這個值根本取不到

 

針對aliyun-UED所給的sdk和example文件分片上傳失敗的bug，解決方案如下：

　　當進行跨域訪問的時候，要想可以讀取response中頭部信息需要在response頭部信息中添加"Access-Control-Expose-Headers“值為允許web端訪問得到header值，但是很可惜，服務器端是不受控的，這個解決方案被淘汰了。

　　閱讀阿里雲的oss幫助文檔，oss提供了一個listparts的功能，我們可以在所有的全部上傳成功后進行listparts的請求獲取所有的分片信息，取出返回的分片信息進行重組后，使用重組后的數據進行文件拼接請求，這樣文件就上傳成功了，部分實現代碼如下：

　　

var complete = function () {
            // console.log("Completing upload...");

            for (var i in multipartMap.Parts) {
                delete multipartMap.Parts[i].loaded;
            }

            var doneParams = {
                Bucket: self.bucket, //self._config.bucket,
                Key: uploadfile.OssUploadControlParm.Key, //self.keygeneratefunc(self,uploadfile), //options.key,
                CompleteMultipartUpload: multipartMap,
                UploadId: uploadId
            };

            self.oss.listParts({//獲取分片
16                 UploadId: uploadId,
17                 Bucket: self._config.bucket,
18                 Key: options.key
19             }, function (err, data) {
20                 var parts = data.Parts;
21                 multipartMap.Parts = [];
22                 var part = null;
23                 for (var i = 0; i < parts.length; i++) {
24                     part = parts[i];
25                     multipartMap.Parts.push({
26                         PartNumber: part.PartNumber,
27                         ETag: part.ETag
28                     });
29                 }
30                 self.oss.completeMultipartUpload(doneParams, callback);
31             });

        };

 

　　注意紅色的代碼，這個就是對example中分片上傳失敗的bug的修復