Question

是否可以通过使用Shopify的Ajax上传订单项属性图片？ Shopify不允许通过Ajax上传文件。

我已经使用Cloudinary提出了一种解决方法（不直接上传到Shopify）。我以为我会在这里分享。

Answer 1

Ajax上传图像作为Shopify中的订单项属性的解决方案。

最初，我尝试将图像转换为BASE64，并且Ajax上传BASE64字符串。然而，这在它显示整个BASE64字符串的顺序中起作用，而不是图像...

所以，我转向Cloudinary - 一个图片上传服务。 Cloudinary自动将BASE64编码的图像转换回适当的图像。图像。

在Cloudinary中，我们需要启用未签名的图片上传才能生效。

http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud

启用后，我们可以通过AJAX将BASE64图像上传到Cloudinary。

var data = {
    upload_preset: "019au6h3", // the unsigned image preset within cloudinary
    tags: "foo", // any tags you wish to apply
    context: "photo=phototitle",
    file: encodedImage // the BASE64 encoded image file http://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form
}

// standard Jquery ajax post

jQuery.post("https://api.cloudinary.com/v1_1/dn5wucjj2/upload", data).done(function(data) {
   // do something here
}).then(function(data) {
    addToCart(data.secure_url) // addToCart is the ajax add to cart post function (whatever function your theme uses, modified to accept an the returned image)
});

data.secure_url是Cloudinary在上传图片时返回的网址。然后我们可以将它传递给我们的addToCart函数 - 它将产品添加到Shopify的购物车中。

在结帐时，客户会看到他们图片的网址（不理想）。但是，在后端，在订单中，Shopify将URL转换为链接。

对于那些担心安全问题的人：https://support.cloudinary.com/hc/en-us/articles/208335975-How-safe-secure-is-it-to-use-unsigned-upload-from-web-browsers-or-mobile-clients-

Shopify订单项属性通过Ajax上传图片

1 个答案: