Shopify行项目属性通过Ajax上传图片

Question

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

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

Answer 1

的溶液到的图像作为内Shopify订单项属性的Ajax的上传。

最初，我试图将图像转换为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的购物车中。

在结账时，顾客会看到他们的图像的URL（不理想）。但是，在订单后端，Shopify将网址变为链接。

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