base 64データストリーム、blobオブジェクトアップロードOSS(node.js環境以外)
2988 ワード
具体的な流れ:画像base 64→blobオブジェクト→arrayBufferオブジェクト→bufferオブジェクト→アップロード成功(.・∀・)ノ゛
ダイレクトコード
筆者はこれまで
2018.04.15更新
次のエラーの原因を整理しました. “Error: _getFileSize requires Buffer/File/String.” アップロード用multipartUpload方式&&アップロードファイルはbufferコンテンツではありません. “Error: _createStream requires File/String.” アップロード用multipartUpload方式. “TypeError: Must provide String/Buffer/ReadableStream for put.” アップロードファイルはbufferコンテンツではありません.
まとめ:base 64データをOSSに正常にアップロードするには、putインタフェースを介して変換されたbufferファイルを転送する必要があります!
2019.03.25更新
同僚からbase 64転bufferの新しい方法を学びました:
アリ雲sdkフロントエンドはどのようにblobオブジェクトをOSSにアップロードします
アップロードファイル-SDKリファレンス|アリクラウドドキュメントセンター
抱擁ES 6——OSS JavaScript SDK開発手記
JS Blobオブジェクト-私のフロントエンドの道
Html 5——File、FileReader、Blob、Fromdataオブジェクト
Node.js BufferとJavaScript Type Arrayタイプ配列の異同
ダイレクトコード
function toBlob(urlData,fileType) {
let bytes = window.atob(urlData);
let n = bytes.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new Blob([u8arr], { type: fileType });
}
// (e.g. data:image/png;base64,iVBOR...yssDuN70DiAAAAABJRU5ErkJggg==)
const urlData;
const base64 = urlData.split(',').pop();
const fileType = urlData.split(';').shift().split(':').pop();
// base64 blob
const blob = toBlob(base64, fileType);
// blob arrayBuffer
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (event) {
//
const client = new OSS.Wrapper({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
//
const objectKey = `uploads/file/${new Date().getTime()}.${fileType.split('/').pop()}`;
// arrayBuffer Buffer
const buffer = new OSS.Buffer(event.target.result);
//
client.put(objectKey, buffer).then(function(result){
/* e.g. result = {
name: "Uploads/file/20171125/1511601396119.png",
res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
} */
}).catch(function(err){
console.log(err);
});
}
筆者はこれまで
法で画像ファイルを取得してスライスアップロードしてきたが、iPhone携帯電話の写真アップロード写真の回転90度の問題を処理するためには、処理後のbase 64データを考慮しなければならない.解決策を探しているうちに、多くの仲間がこの問題に閉じ込められていることに気づき、この文章が少しでも役に立つことを望んでいます.現在、base 64データをOSSにアップロードできるが、実際にh 5プロジェクトに運用すると、効果はあまりよくなく、パスが遅く、写真を縮小処理してからアップロードするしかない.もし小さな仲間がもっと良い解決策があれば、教えてあげます.2018.04.15更新
次のエラーの原因を整理しました.
まとめ:base 64データをOSSに正常にアップロードするには、putインタフェースを介して変換されたbufferファイルを転送する必要があります!
2019.03.25更新
同僚からbase 64転bufferの新しい方法を学びました:
const buffer = Buffer.from(base64, 'base64');
参照先:アリ雲sdkフロントエンドはどのようにblobオブジェクトをOSSにアップロードします
アップロードファイル-SDKリファレンス|アリクラウドドキュメントセンター
抱擁ES 6——OSS JavaScript SDK開発手記
JS Blobオブジェクト-私のフロントエンドの道
Html 5——File、FileReader、Blob、Fromdataオブジェクト
Node.js BufferとJavaScript Type Arrayタイプ配列の異同