问题
I'm trying to construct a simple Cloudinary image upload based on this codepen example: https://codepen.io/team/Cloudinary/pen/QgpyOK --
I've converted it to work with fetch
but even though I've gone to my Cloudinary settings and created an unsigned upload preset, which I'm providing to the headers, I'm still getting an error
POST https://api.cloudinary.com/v1_1/myproject/upload 400 (Bad Request)
with the error message
Upload preset must be specified when using unsigned upload
The code I'm using is the following
_callCloudinaryApi(file, method = 'post') {
const config = {
method
}
const cloudName = "myproject" // fictional project name here
const unsignedUploadPreset = "mypreset" // fictional preset name here
const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
const fd = new FormData();
fd.append('upload_preset', unsignedUploadPreset);
fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
fd.append('file', file);
if (method !== 'get') {
config.headers = {}
config.headers['X-Requested-With'] = 'XMLHttpRequest'
}
return fetch(url, config)
.then(res => res.json())
.then(res => {
console.log(res)
return res;
})
}
Can anyone help me to determine what the problem might be? Thanks very much!
回答1:
You can try something like the following-
var data = new FormData();
data.append('upload_preset', '<upload_preset>');
data.append('file', file);
data.append('cloud_name', '<cloud_name>');
const config = {
method: "POST",
body: data
};
var imgurl = "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload";
fetch(imgurl, config)
.then(responseData => {
console.log(JSON.stringify(responseData, null, 4));
})
回答2:
I had this error too, going to https://cloudinary.com/console/settings/upload
, you do have an Upload presets
there, be sure that there is one with a Signing Mode
turned to Unsigned
.
It's maybe not the best thing to do in terms of security (better way will be to get authenticated I guess).
I found the clue about the 400 error with the Devtools network tab btw.
回答3:
I encountered the same issue, hope this solution helps others
uploadFile = async (e) => {
const files = e.target.files;
const data = new FormData();
data.append('file', files[0]);
data.append('upload_preset', 'PRESET_NAME');
const res = await fetch('https://api.cloudinary.com/v1_1/{YOUR_ACOUNT_USER}/image/upload', {
method: 'POST',
body: data
});
const file = await res.json();
console.log(file);
this.setState({
image: file.secure_url
})
}
来源:https://stackoverflow.com/questions/51633061/cloudinary-image-upload-from-react-am-including-cloudinary-unsigned-preset-but