从 next.js 上传到 django 以存储在 aws s3 中的图像是空白的答案

【问题标题】：uploaded image from next.js to django to store in aws s3 is blank从 next.js 上传到 django 以存储在 aws s3 中的图像是空白的
【发布时间】：2021-12-01 10:58:51
【问题描述】：

我为 s3 设置了功能，我可以轻松地从 Django 管理界面上传图像。我有“createProduct”页面，我想通过从 next.js 发送表单数据来创建产品。 Django 将 URL s3 存储桶存储在 DB 中，并在需要时从 s3 中检索图像。

我设置了查看图像并裁剪它的功能，它也能正常工作。为此，我有一个单独的组件：

  <div className="form-group">
        <label htmlFor="image">Image</label>
        <FileLoader 
          onFileUpload={image => setValue('image', image._id)}
        />
      </div>

我需要创建一个端点。 admin，先上传图片，图片保存到s3，然后admin获取图片的url，传给form data，这样form data就会发送到createProduct端点。

@api_view(['POST'])
@permission_classes([IsAdminUser])
def createProduct(request):
    user=request.user
    print("user in post",user)
    print("request.data",request.data)
    name=request.data['name']
    price=request.data['price']
    brand=request.data['brand']
    countInStock=request.data['countInStock']
    category=request.data['category']
    description=request.data['description']
    // Here i need to send the imag url I guess
    image=request.FILES.get('image')
    print("image",image)
    product=Product.objects.create(user=user, name=name,
                                   price=price,brand=brand,
                                   countInStock=countInStock,category=category,description=description, image=image)
    product.save()
    serializer=ProductSerializer(product, many=False)
    return Response(serializer.data)

这是 s3 上传的端点：

@api_view(['POST'])
def upload(request):
    data=request.data
    print("image data sent",data)
    client=boto3.client("s3",
                        aws_access_key_id=os.environ.get('AWS_ACCESS_KEY_ID'),
                        aws_secret_access_key=os.environ.get('AWS_SECRET_ACCESS_KEY'),
                        # s3 does not need region
                        # region_name=os.environ.get(AWS_REGION_NAME),
                        )

  response = client.upload_fileobj(data,"bingology-bucket","testing",{'ContentType': "image/jpeg"}

我收到成功上传的消息，图片在存储桶中，但它只显示黑色背景，“类型”为“-”。

我也尝试获取预签名的 url，我得到了 url，但它没有保存任何东西，所以 s3。由于权限问题，即使存储桶是公开的，我也无法查看网址

【问题讨论】：

您遇到的具体问题是什么？
@juliomalves 我可以写出终点。所有的教程或文章都展示了如何设置 s3 的设置并从 django admin 上传
@juliomalves 我忘了编辑问题以添加端点

标签： django amazon-s3 django-rest-framework next.js boto3

【解决方案1】：

我认为我们需要另一个端点，具有使用此架构处理上传的逻辑：

uploadImage（另一个端点的名称）从下一个 js 接收图像元数据。
uploadImage 生成一个预签名的 Url（因为您使用的是 S3），将此 URL 返回给 nextjs，nextjs 使用此预签名的 url 执行上传并调用 createProduct 端点传递 URL（uploadImage 可以过滤以返回确切的 URL object) 以及要存储在 DB 中的所有产品数据。

这种方法可以更好地使用 SAGA 模式来编排事物，因为由于您需要处理 2 个不同的进程（s3 上传和 db 事务），您可以编排这些事物，或者在单一架构中使用事务（所有业务一个部署中的逻辑）。

小贴士：

在这种情况下使用 SAGA 模式，如果 createProduct 中有错误，您只需要检测作业以删除图像。您可以通过在前端使用逻辑将消息放在带有 lambda 表达式的 SNS 上来实现这一点，以便从中读取并删除 S3 中的图像，因为产品未正确保存。

文档：

https://microservices.io/patterns/data/saga.html https://docs.aws.amazon.com/AmazonS3/latest/userguide/PresignedUrlUploadObject.html

【讨论】：