javascript - 使用 javascript 将图像保存在 Google Storage 上

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 将其流式传输到我的谷歌云存储桶。最后，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 是我选择的后端框架。