我想为我的客户添加一个字段，以便他们在购买产品或将产品添加到购物车时上传图片。当输入文件类型时，它允许上传照片，但它不起作用。谁能给我那个解决方案？
<div class="product-form__item product-form__item-uplpic">
<label for="photo">Upload Photo</label>
<input required class="product-form__input required" id="photo" type="file" name="properties[Uploaded Image]">
</div>
【问题讨论】：
标签： javascript shopify shopify-template
您绝对可以让您的客户有机会上传图片，这本身相当简单，但 Shopify 主题通常会使其变得复杂。
如果您使用带有type="input" 的字段和带有name="properties[some custom property name]" 的名称，您可以上传带有正确表单提交的图像。如果您已经熟悉如何添加自定义订单项属性，那么此结构应该看起来相当熟悉。如果您的表单正在正常提交，但您仍然看不到您上传的内容，请确保form 标签设置了enctype="multipart/form-data"。
但是，当主题跳入做各种花哨的事情时，事情就会变得棘手。如果您的主题在您点击“添加到购物车”按钮时将您留在产品页面上，则您的主题是使用 Shopify 的 API 端点使用 Javascript 而不是普通的 HTML POST 表单添加产品。我见过的每个实现此类功能的主题都以不完整的方式这样做，即使用类似于data = jQuery(form).serialize() 的东西来获取代表表单中所有用户选择的文本字符串 - 但文件上传字段不能以这种方式serialize'd，所以它会被忽略。
有两种方法可以绕过这个常见的主题限制：
1) 关闭或以其他方式禁用商店中基于 javascript 的添加到购物车功能。在某些主题中，这可以通过在管理员中转到主题的自定义页面来完成 - 通常可以在“购物车”或“产品”标题下的设置中通过指定您希望客户转到购物车来关闭该功能添加产品后的页面。 （确切的排序方式或措辞完全由主题设计者控制 - 如果您无法找到它，您应该能够与主题提供者联系以寻求帮助）
2) 如果您对一些编码感到满意，您可以通过对代码进行一些更改来自定义您的主题以仍然执行花哨的停留在页面上的产品添加。不要使用.serialize() 函数（或类似函数）来获取数据，而是使用FormData 对象。如果使用 jQuery 发布数据，您将需要指定一些额外的选项来阻止 jQuery 做太多事情。具体来说，您需要在 AJAX 设置对象中设置 processData: false, contentType: false。如果使用 Fetch 或普通的 XHR 请求，请记住您的 Content-type 是 multipart/form-data。
注意：如果使用方法 #2 升级您的主题的加入购物车功能，目前这将导致 Shopify 的内置跟踪代码（“Trekkie”）在加入购物车时失败。 Trekkie 劫持了浏览器的原生 XMLHttpRequest.prototype.send 函数以使用一些跟踪代码对其进行包装，并且该跟踪代码假定 posted 的任何内容都是 JSON 对象/序列化形式。
参考资料： 表单编码类型：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype
使用 FormData 对象：https://developer.mozilla.org/en-US/docs/Web/API/FormData
在 jQuery 中使用 FormData：https://stackoverflow.com/a/5976031/2592369（注意：您有一个现有的表单，请参阅“从现有表单创建 FormData”部分
产品自定义：https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products#allow-file-uploads（注意：Shopify 文章声称弹出式/抽屉式购物车与文件上传不兼容 - 这只是部分正确，因为主题开发人员可以将他们的主题设计为这种兼容性——他们只是选择不这样做）
【讨论】：