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

问题描述

我为 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。由于权限问题，我在访问时无法查看 url，即使存储桶是公开的

标签： djangoamazon-s3django-rest-frameworknext.jsboto3

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

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

这种方法可以更好地使用 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

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

问题描述

解决方案

推荐阅读