canvas等base64格式上傳到服務端直傳到oss

通常來講，咱們用畫布，html2canvas這些獲取的都爲base64格式的

html2canvas(document.body, {

　　onrendered: function (canvas) {

　　console.log('。。。。。。', canvas.toDataURL("image/png"));

　　},

});

可是上傳到oss是不能夠直接上傳base64的，須要把base64轉換成blob,而後把blob轉換成file文件的形式

咱們在以前拿到了base64文件，如今把他轉換成blob形式的：

var _fileBlob = dataURLtoBlob(base);

function dataURLtoBlob(dataurl) {

　　var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

　　bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

　　while (n--) {

　　　　u8arr[n] = bstr.charCodeAt(n);

　　}

　　return new Blob([u8arr], { type: mime });

}

最後把blob轉換成file文件形式：

let fileOfBlob = new File([_fileBlob], new Date() + '.jpg');

//這裏默認上傳爲jpg格式的

便可把這個ileOfBlob加到var request = new FormData();這裏來：

request.append('file', fileOfBlob);

 

值得注意的是，好像oss上傳有順序規則

1.request.append('name', 'Picture_G_Balloon.jpg');

2.request.append('key', random_name);

3.request.append("policy", data.policy);//policy規定了請求的表單域的合法性

4.request.append("OSSAccessKeyId", data.ossaccessKeyId);//Bucket 擁有者的Access Key Id。

5.request.append("success_action_status", '200');// 讓服務端返回200,否則，默認會返回204

6.request.append("Signature", data.signature);//根據Access Key Secret和policy計算的簽名信息，OSS驗證該簽名信息從而驗證該Post請求的合法性

7request.append('file', fileOfBlob);

貌似要這樣的順序，否則會報錯，很奇怪，不知道是否是後臺上傳的設置。。。