使用javascript在Google Storage上保存图片
我的目标是将图像存储在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编写的
回答如下：我以前做过这件事，虽然我没有声称我有最直接的方式。
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.bodyID).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);
});
});
希望有所帮助！应该让你知道一种方法来做到这一点。
附：很多东西可能正在使用类似Sails的NodeJS约定，Sails是我选择的后端框架。
使用javascript在Google Storage上保存图片
我的目标是将图像存储在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编写的
回答如下：我以前做过这件事，虽然我没有声称我有最直接的方式。
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.bodyID).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);
});
});
希望有所帮助！应该让你知道一种方法来做到这一点。
附：很多东西可能正在使用类似Sails的NodeJS约定，Sails是我选择的后端框架。