Google Storageの画像をjavascriptに保存

Question

私の目標は、S3またはGoogle Storageに画像を保存し、データベースにリンクを保存することです。どうしたらいいですか？無料の解決策がいくつかありますか？

誰かがそれを行うためのコードサンプルをリンクできますか？ 以前はGoogle StorageやS3を使ったことがありません。

私はそのようなイメージを選択：その後、

handleImage = e => { 
    e.preventDefault(); 
    let reader = new FileReader(); 
    let file = e.target.files[0]; 

    reader.onloadend =() => { 
     this.setState({ 
      file: file, 
      image: reader.result 
     }); 
    } 
    reader.readAsDataURL(file); 
    this.setState({ imgchange: true }) 
} 

そして、それをサーバに送信します。

 this.props.editUser({ 
      img: this.state.image,     
     }) 

私のサーバーは、私は正確にこれをやったNode.jsの

Answer 1

と書かれています私は最も簡単な方法を持っていたと主張していませんが、前に物事。

1）画像をクライアント側からサーバーにbase64イメージとして送信し、そのイメージを取得し、2）バッファを作成し、3）imageMagickを使用してGoogleのクラウドバケットにストリームします。最後に、4）データベース内のオブジェクトのgoogleクラウドバケットへのリンクをimgLinkとして保存するか、フロントエンドアプリケーションで表示できるようにします。

いくつかの重要な事柄は、トップで必要とする

var gm = require('gm').subClass({ imageMagick: true }); 
var gcs = require('@google-cloud/storage')({ 
     keyFilename: sails.config.gcloud.keyFileName, 
     projectId: sails.config.gcloud.projectId 
}); 
var bucket = gcs.bucket(sails.config.gcloud.bucketname); 

ステップ1 - バックエンドサービスにbase64で画像を送信し、それをデコード

imageControllerFirstHitAtEndpoint: function (req, res) { 

    PictureService.uploadPictureCDNReturnLink(req.body.picture, function (err, imageLink) { 
     if (err) { 
      // Handle error... 
     } 

     // Success, save that imageLink to whatever db object you want 
    } 
} 

ステップ2と3 - バッファを作成します。 base64データを使用してGoogle Cloud Bucketにストリーム配信

// Step 2 create buffer with base64 data 
uploadPictureCDNReturnLink: function(picDataInBase64, cb) { 
    var imageBuffer; 

    imageBuffer = PictureService.bufferFromBase64(picDataInBase64); 
    var file = bucket.file('cool-file-name'); 

    // Step 3 stream it to where it needs to go 
    gm(imageBuffer) 
     .stream() 
     .pipe(file.createWriteStream()) 
     .on('finish', function() { 

     file.getMetadata(function(err, metadata) { 
      if (err) { 
       console.log("Error getting metadata from google cloud", err); 
       return cb(err); 
      } 

      cb(null, metadata.mediaLink); 
     }); 

    }).on('error', function(err) { 
     console.log("Got an error uploading to Cloud Storage:", err); 
     cb(err); 
    }); 
} 

ステップ4 - あなたが好きな場所にそのイメージリンクを保存

はない、ハード、あなたのための完全にこれを綴ることはありません。何かがちょっと好き：助け

Organization.findOne(req.body.orgID).exec(function (err, organization) { 
    if(!organization) { 
     return res.json(400, { error: "No organization with id: " + req.param('id') }); 
    } 
    if (err) { 
     return res.json(400, err); 
    } 
    organization.pictureLink = imageLink; 
    organization.save(function (err) { 
     return res.json(organization); 
    }); 
}); 

願っています！それを行うための方法のアイデアを与える必要があります。

P.S.そのようなものの多くは、SailsのようなNodeJSの規約を使用している可能性があります.Sailsはバックエンドの選択肢の枠組みです。