base 64データストリーム、blobオブジェクトアップロードOSS(node.js環境以外)

2988 ワード

具体的な流れ:画像base 64→blobオブジェクト→arrayBufferオブジェクト→bufferオブジェクト→アップロード成功(.・∀・)ノ゛
ダイレクトコード


    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更新
次のエラーの原因を整理しました.
  • “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の新しい方法を学びました: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タイプ配列の異同