AMP中是否有一种方法可以显示从输入表单中选择的图像？

Question

我想在使用AMP上传之前（在客户端）显示来自输入表单文件的图像，我试图避免将图像上传到临时文件夹并从那里加载的过程。这种形式是将项目（带有图像）添加到列表中，并且可以很容易地放弃它，因此我要避免清除孤立图像。

我进行了一些研究，发现所有解决方案都涉及Javascript，例如this和this，但我不希望在“完整的AMP网站”中使用javascript。

是否有使用AMP的解决方案来解决此问题？

Answer 1

AMP目前不支持。一种解决方法是通过iframe嵌入表单，并使用JS在其中实现文件选择器。

Answer 2

我解决了。我在this页面中看到允许base64作为src值，因此我实现了和端点，它们从表单接收图像并返回此数据：

data:{content_type};base64,{coded_img}

然后，我使用on属性使用此数据设置状态，图像的src属性获取该值。

<form id="item-form"
      method="post"
      action-xhr="//{{ request.get_host }}{% url 'submit-image' %}"
      target="_top"
      on="submit-success:AMP.setState({ currentItem: {imageUrl: event.response.image }})">
<input type='file' name='image'>
<button type='submit'></button></form>

<amp-img alt="Item Image"
         src=""
         [src]="currentItem['imageUrl']"
         width="150"
         height="150"
         layout="responsive">
</amp-img>