Shopify contact表单文件上传异常 添加enctype属性报错解决方案

初始实现代码 #

在自定义页面模板 templates/page.employment.liquid 中编写的初始Liquid联系表单代码如下：

{% form 'contact' %}

{% if form.posted_successfully? %}
    <p class="note success">Success!</p>
{% endif %}

{{ form.errors | default_errors }}

<p>
    <label for="ContactFormName">Name</label>
    <input type="text" id="ContactFormName" name="contact[name]" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}" required>
</p>

<p>
    <label for="ContactFormCV">Upload CV</label>
    <input type="file" id="ContactFormCV" name="contact[cv]" required />
</p>

{% endform %}

故障现象 #

• 初始版本表单提交后，管理员收到的联系通知邮件仅展示上传文件的文件名，无法获取文件附件或有效访问链接

• 尝试手动为表单添加编码属性，将表单 opening 标签修改为如下代码后，提交表单直接触发站点加载错误：

  {% form 'contact', enctype: 'multipart/form-data' %}
  

  错误页提示内容：

  There was a problem loading this website
  Try refreshing the page.
  If the site still doesn't load, please try again in a few minutes.

  报错页面截图：
  

正确配置方案 #

核心限制说明：Shopify原生contact表单类型不支持直接接收文件二进制内容，手动添加multipart/form-data属性会触发平台表单安全校验，直接拦截请求返回错误，这就是修改enctype后页面报错的根本原因。

按以下步骤配置即可实现文件上传、提交后获取文件的需求：

• 首先移除表单标签上手动添加的enctype: 'multipart/form-data'参数，恢复为原生{% form 'contact' %}写法，先解决表单提交报错问题。
• 调整文件上传逻辑，不要直接把file字段作为contact表单的提交项：
  • 为CV上传的file输入框绑定独立的JS上传事件，用户选中文件后，先调用Shopify官方文件上传接口，将文件上传到店铺后台「内容」-「文件」存储目录
  • 上传完成后接口会返回文件的公网可访问URL，将这个URL写入表单内新增的隐藏字段（比如name="contact[cv_link]"）
  • 表单正常提交时，隐藏字段中存储的文件链接会和姓名等其他字段一起，同步发送到联系表单通知邮件中，点击链接即可直接访问、下载用户上传的CV文件
• 可选优化：进入Shopify后台「设置」-「通知」-「客户联系表单」模板，在邮件内容中对应位置把cv_link字段的值渲染为可点击的超链接，方便直接查看。

注意：Shopify原生contact表单对自定义字段的长度限制完全满足存储文件URL的需求，不要尝试通过自定义字段传递文件二进制内容，这类请求会被平台安全规则直接拦截。
如果不想自行开发JS上传逻辑，也可以直接使用Shopify应用市场中成熟的带文件上传能力的表单应用，这类应用已经封装好上传鉴权、文件存储、通知推送的全流程，直接嵌入页面即可使用。

内容的提问来源于stack exchange，提问作者User_FTW