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）将数据库中对象上的谷歌云存储桶链接为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步 - 将imageLink保存到您想要的任何地方

不会完全为你拼出这个，不是那么难。有点像：

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是我选择的后端框架。

使用javascript在Google Storage上保存图片

1 个答案: