云功能:调整大小的图像未加载 [英] Cloud Functions: Resized images not loading
问题描述
我正在关注 教程 以通过 Cloud 调整图像大小上传功能,遇到两个我无法弄清楚的主要问题:
I am following a tutorial to resize images via Cloud Functions on upload and am experiencing two major issues which I can't figure out:
1) 如果上传了 PNG,它会生成正确大小的缩略图,但它们的预览不会加载到 Firestorage 中(加载微调器会无限期地显示).它只在我点击生成新的访问令牌"后显示图像(生成的缩略图最初都没有访问令牌).
1) If a PNG is uploaded, it generates the correctly sized thumbnails, but the preview of them won't load in Firestorage (Loading spinner shows indefinitely). It only shows the image after I click on "Generate new access token" (none of the generated thumbnails have an access token initially).
2) 如果上传的是 JPEG 或任何其他格式,则 MIME 类型显示为application/octet-stream".我不确定如何正确提取扩展名以放入新生成的缩略图的文件名中?
2) If a JPEG or any other format is uploaded, the MIME type shows as "application/octet-stream". I'm not sure how to extract the extension correctly to put into the filename of the newly generated thumbnails?
export const generateThumbs = functions.storage
.object()
.onFinalize(async object => {
const bucket = gcs.bucket(object.bucket);
const filePath = object.name;
const fileName = filePath.split('/').pop();
const bucketDir = dirname(filePath);
const workingDir = join(tmpdir(), 'thumbs');
const tmpFilePath = join(workingDir, 'source.png');
if (fileName.includes('thumb@') || !object.contentType.includes('image')) {
console.log('exiting function');
return false;
}
// 1. Ensure thumbnail dir exists
await fs.ensureDir(workingDir);
// 2. Download Source File
await bucket.file(filePath).download({
destination: tmpFilePath
});
// 3. Resize the images and define an array of upload promises
const sizes = [64, 128, 256];
const uploadPromises = sizes.map(async size => {
const thumbName = `thumb@${size}_${fileName}`;
const thumbPath = join(workingDir, thumbName);
// Resize source image
await sharp(tmpFilePath)
.resize(size, size)
.toFile(thumbPath);
// Upload to GCS
return bucket.upload(thumbPath, {
destination: join(bucketDir, thumbName)
});
});
// 4. Run the upload operations
await Promise.all(uploadPromises);
// 5. Cleanup remove the tmp/thumbs from the filesystem
return fs.remove(workingDir);
});
非常感谢任何反馈!
推荐答案
我刚遇到同样的问题,不知道什么原因 Firebase 的 Resize Images on 故意从调整后的图片中删除下载令牌
I just had the same problem, for unknown reason Firebase's Resize Images on purposely remove the download token from the resized image
禁用删除下载访问令牌
- 转到 https://console.cloud.google.com
- 从左侧选择 Cloud Functions
- 选择 ext-storage-resize-images-generateResizedImage
- 点击编辑
- 从内联编辑器转到文件 FUNCTIONS/LIB/INDEX.JS
- 在此行之前添加//(delete metadata.metadata.firebaseStorageDownloadTokens;)
- 也注释此文件中的同一行FUNCTIONS/SRC/INDEX.TS
- 按 DEPLOY 并等待它完成
- goto https://console.cloud.google.com
- select Cloud Functions from the left
- select ext-storage-resize-images-generateResizedImage
- Click EDIT
- from Inline Editor goto file FUNCTIONS/LIB/INDEX.JS
- Add // before this line (delete metadata.metadata.firebaseStorageDownloadTokens;)
- Comment the same line from this file too FUNCTIONS/SRC/INDEX.TS
- Press DEPLOY and wait until it finish
注意:原始和调整大小将具有相同的令牌.
note: both original and resized will have the same Token.
这篇关于云功能:调整大小的图像未加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!