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

Shopify Line Item Properties Image upload via Ajax

本文关键字：Ajax 上传 项目 属性 Shopify      更新时间：2023-09-26

是否可以使用Shopify通过Ajax上传行项目属性图像？Shopify不允许通过Ajax上传文件。

我已经想出了一个使用Cloudinary的解决方案（不直接上传到Shopify）。我想在这里分享一下。

在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在上传图像时返回的url。然后，我们可以将其传递给我们的addToCart功能，该功能将产品添加到Shopify的购物车中。

在结账时，客户会看到他们的图片的url（不理想）。然而，在后台，在订单中，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-

相关文章：