[英]Cloudinary - Uploading with a direct call to the API, Missing file
Hi I'm trying to use Cloudinary from React JS so I'm using direct call to the API from browser. 嗨,我正在尝试使用React JS中的Cloudinary,所以我正在使用从浏览器直接调用API的方法。 I have server which returns me api_key etc...
我有返回我api_key等的服务器...
I'm using readAsDataURL() to change my file into base64 我正在使用readAsDataURL()将文件更改为base64
let file = e.target.files[0];
let self = this;
let typeString = this.tellType(file);
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
self.sendMedia(typeString, this.result)
}
Then I'm getting api_key, timestamp etc from clients nodejs server, and I need to send the image and I need to send it to cloudinary. 然后,我从客户端nodejs服务器获取api_key,时间戳等,并且我需要发送图像并将其发送到cloudinary。
let request = new XMLHttpRequest();
let params = {
api_key: result.upload_info.api_key,
timestamp: result.upload_info.timestamp,
signature: result.upload_info.signature,
public_id: result.upload_info.public_id,
file: file
};
console.log('params',params);
request.open('POST', `https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`, true);
request.onreadystatechange = function() {
console.log('its back', request)
};
request.send(params);
And then I receive 403 (bad request) 然后我收到403(错误请求)
responseText: "{"error":{"message":"Missing required parameter - file"}}"
I was at the first time thinking that my file is in wrong format, but base64 is allowed by cloudniary. 我第一次想到文件格式错误,但是cloudniary允许使用base64。 Thank you.
谢谢。
I was having the same issue. 我有同样的问题。 It happens that you must send the params as a JSON.
碰巧您必须将参数作为JSON发送。
var reader = new FileReader();
reader.onload = function (e) {
//next line separates url from data
var form = new FormData();
form.append("file",e.target.result);
form.append("upload_preset", "preset_key");
currentRequest = $.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var progress = parseInt(evt.loaded / evt.total * 100, 10);
console.log(progress)
}
}, false);
return xhr;
},
async: true,
crossDomain: true,
url: 'https://api.cloudinary.com/v1_1/cloud_name/image/upload',
type: "POST",
headers: {
"cache-control": "no-cache"
},
processData: false,
contentType: false,
mimeType: "multipart/form-data",
data: form,
beforeSend: function () {
if (currentRequest != null) {
currentRequest.abort();
}
},
success: function (data) {
data=JSON.parse(data)
console.log(data['url'])
},
error: function (jqXHR, textStatus) {
console.log(jqXHR)
}
});
};
reader.readAsDataURL(this.files[0]);
You can always use this package called cloudinary-direct . 您总是可以使用称为cloudinary-direct的软件包。
const Cloud = require('cloudniary-direct');
Cloud.cloudName = "your_cloud_name_from_cloudinary";
Cloud.api_key = "your_api_key_from_cloudinary";
Cloud.api_secret = "your_api_secret_from_cloudinary";
Cloud.upload_preset = "your_upload_preset_from_cloudinary";
If you use something like react then do this . 如果您使用类似react之类的方法,请执行此操作。
import React from 'react';
import Cloud from 'cloudniary-direct';
import DropZone from 'react-dropzone';
class Sender extends React.Component{
constructor(){
super();
this.handler = this.handler.bind(this);
}
handler(file){
Cloud.cloudName = "your_cloud_name_from_cloudinary";
Cloud.api_key = "your_api_key_from_cloudinary";
Cloud.api_secret = "your_api_secret_from_cloudinary";
Cloud.upload_preset = "your_upload_preset_from_cloudinary";
Cloud.imageUploader(file[0], (resp)=> {
const imageURL = resp.secure_url;
// Save that url in the database
})
}
render(){
return (
<div>
<DropZone onDrop={this.handler} />
</div>
)
}
}
Hope it helps . 希望能帮助到你 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.