How to get the cloudinary widget image info on upload?

问题

I'm using the cloudinary widget to upload images on my websites. Now I'd like to get the info from an image when it's being uploaded e.g. the path of that image.

I can see that this information is available in the console log when uploading the image e.g. {path: "v1586568667/myusername/lp62llmn8sa7r5vqjovd.jpg"}

I believe I have to use ajax to get this information, but I'm struggling to find some examples, if someone could point me to the right direction.

回答1:

Thanks everyone for your feedback. I've found a way that suit my needs, see updated script below where I grab the "result.info.path" value with "var imagePath", then I can call it anywhere I want on the page with "document.getElementById" for example.

var myWidget = cloudinary.createUploadWidget({
  cloudName: 'myusername', 
  uploadPreset: 'preset_unsigned'}, (error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 

    var imagePath = result.info.path;

        document.getElementById("uploadedImage").src = "https://res.cloudinary.com/myusername/image/upload/" + imagePath;

    }
  }
)

document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);

回答2:

The Upload Widget configuration takes a callback function that will have the error and result objects from the upload method call. You can use those two objects to check if the upload failed, what the status was and how you want to process the information returned in the API response.

For example, if you want to print the secure_url to the uploaded image you can do something like -

var cloudinaryWidget = cloudinary.createUploadWidget({
    cloudName: "xxx",
    uploadPreset: "yyy"
  },
  function(error, result) {
    if (!error && result && result.event === "success") {
      console.log(result.info.secure_url);
    }
  }
);

Once you've uploaded an image successfully the console will log the secure_url.

In general, the result.info object will contain a standard upload API response. So you can extract the parts you need. E.g. result.info.public_id which you probably want to store on your side too so you can make other API operations on the file, such as deleting it.

来源：https://stackoverflow.com/questions/61153317/how-to-get-the-cloudinary-widget-image-info-on-upload

标签

javascript

ajax

console.log

cloudinary