如何通过/cart/add.js上传图片至Shopify订单管理后台？

我做了个自定义产品构建器，用户输入的信息（包括图片上传字段）都带name="properties[]"属性，原本直接提交表单能正常把图片传到订单里。但为了加购前验证字段，我给加购按钮加了e.preventDefault()，改用Ajax通过/cart/add.js提交，结果图片没法正常发送到后台订单了。

提交代码如下：

const productFormBtn = document.querySelector(
  ".content-builder__sidebar form .product-form__submit"
);

const cardForm = document.querySelector(".content-builder__sidebar form");

productFormBtn.addEventListener("click", (e) => {
      e.preventDefault();
      const formData = new FormData(cardForm);

      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/cart/add.js", true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.responseType = "json";

      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log("Success:", xhr.response);
         }else {
            console.error("Error:", xhr.status, xhr.statusText);
          }
        };

        xhr.onerror = function() {
          console.error("Network error");
        };

        xhr.send(new URLSearchParams(formData));
      });

正常提交与Ajax提交的文件发送对比：

问题根源 #

1. 手动设置Content-Type为application/x-www-form-urlencoded：上传文件必须使用multipart/form-data编码，XMLHttpRequest发送FormData时会自动生成正确的Content-Type（包含boundary分隔符），手动设置会覆盖这个自动配置，导致文件无法被后台解析。
2. 将FormData转为URLSearchParams发送：URLSearchParams只能处理字符串类型的表单数据，会直接丢弃文件对象，导致图片信息丢失。

修复后的代码 #

const productFormBtn = document.querySelector(
  ".content-builder__sidebar form .product-form__submit"
);

const cardForm = document.querySelector(".content-builder__sidebar form");

productFormBtn.addEventListener("click", (e) => {
  e.preventDefault();
  
  // 在这里添加你的字段验证逻辑
  // 示例：if (!cardForm.querySelector('input[name="properties[]"]').value) { alert('请填写必填项'); return; }

  const formData = new FormData(cardForm);
  const xhr = new XMLHttpRequest();

  xhr.open("POST", "/cart/add.js", true);
  // 移除手动设置的Content-Type，让浏览器自动处理
  xhr.responseType = "json";

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log("加购成功:", xhr.response);
      // 可添加成功后的操作，比如跳转购物车或显示提示
    } else {
      console.error("加购失败:", xhr.status, xhr.statusText);
    }
  };

  xhr.onerror = function() {
    console.error("网络错误");
  };

  // 直接发送原始FormData，不要转换格式
  xhr.send(formData);
});

额外注意事项 #

• 确保所有自定义字段（包括上传字段）的name属性都保持properties[]，Shopify会以此识别并将属性关联到对应订单产品中。
• 字段验证逻辑需放在创建FormData之前，验证不通过则终止提交流程。

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