1

我正在尝试从浏览器将图像上传到数字海洋空间。这些图像应该是公开的。我能够成功上传图片。

但是，虽然 ACL 设置为public-read，但上传的文件始终是 private。

我知道它们是私有的，因为 a）仪表板说权限是“私有的”，b）因为公共 url 不起作用，c）在仪表板中手动将权限更改为“公共”可以解决所有问题。

这是我正在使用的整个过程。

  1. 在后端创建一个预签名的 URL
  2. 将该网址发送到浏览器
  3. 将图像上传到该预签名的网址

任何想法为什么图像不公开？

代码

以下示例使用 TypeScript 编写并使用 AWS 的 v3 开发工具包。

后端

这会生成预签名的 url 以上传文件。

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'

const client = new S3Client({
    region: 'nyc3',
    endpoint: 'https://nyc3.digitaloceanspaces.com',
    credentials: {
        accessKeyId: process.env.DIGITAL_OCEAN_SPACES_KEY,
        secretAccessKey: process.env.DIGITAL_OCEAN_SPACES_SECRET,
    },
})

const command = new PutObjectCommand({
    ACL: 'public-read',
    Bucket: 'bucket-name',
    Key: fileName,
    ContentType: mime,
})

const url = await getSignedUrl(client, command)

然后将预签名的 url 发送到浏览器。

前端

这是客户端上实际将文件上传到 Digital Ocean 的代码。file是一个文件对象。

const uploadResponse = await fetch(url, {
    headers: {
        'Content-Type': file.type,
        'Cache-Control': 'public,max-age=31536000,immutable',
    },
    body: file,
    method: 'PUT',
})

元数据

  • AWS 开发工具包：3.8.0
4

3 回答 3

3

事实证明，对于 Digital Ocean，您还需要将public-readACL 设置为 put 请求中的标头。

//front-end
const uploadResponse = await fetch(url, {
    headers: {
        'Content-Type': file.type,
        'Cache-Control': 'public,max-age=31536000,immutable',
        'x-amz-acl': 'public-read', // add this line
    },
    body: file,
    method: 'PUT',
})
于 2021-03-10T04:56:13.133 回答
0

试试这个来强制 ACL 在数字海洋空间中公开：

s3cmd --access_key=YOUR_ACCESS_KEY --secret_key=YOUR_SECRET_KEY --host=YOUR_BUCKET_REGION.digitaloceanspaces.com --host-bucket=YOUR_BUCKET_NAME.YOUR_BUCKET_REGION.digitaloceanspaces.com --region=YOUR_BUCKET_REGION setacl s3://YOUR_BUCKET_NAME --acl-public
于 2021-03-13T15:17:29.040 回答
0

我没有评论的声誉，因此添加了回复。谢谢@Nick ...这是我为 DigitalOcean 预签名 url 看到的为数不多的代码工作示例之一。虽然此处提到的官方 DigitalOcean 描述Content-Type需要使用预签名的 url 上传，但没有示例代码。

另一个阻止我在 DigitalOcean 中使用预签名 URL 上传文件的错误是使用'Content-Type':'multipart/form-data'and FormData().

看到这篇文章后，我按照@Nick 的建议使用File()对象和'Content-Type':'<relevant_mime>'. 然后，文件上传就像一个魅力。这也没有包含在官方文档中。

于 2021-10-12T17:22:03.483 回答