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-