离子电容器应用无法使用xhr上传文件

Question

我正在尝试上传使用离子和电容器从相机捕获的图像以及我正在使用的以下代码：

var url = 'https://api.cloudinary.com/v1_1/' + this.cloudName + '/image/upload';
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader("Access-Control-Allow-Origin","*")
xhr.onreadystatechange = (e) => {
this.loading = false;
if (xhr.readyState == 4 && xhr.status == 200) {
// File uploaded successfully
var response = JSON.parse(xhr.responseText);
var url = response.secure_url;
// Create a thumbnail of the uploaded image, with 150px width
var tokens = url.split('/');
tokens.splice(-2, 0, 'w_150,c_scale');
var img = new Image(); // HTML5 Constructor
img.src = tokens.join('/');
img.alt = response.public_id;
document.body.appendChild(img);
//window.alert(url);
this.imageUrl = url;
this.capturedImage = this.base64Image;
//alert('capture:' + capturedImage);
}else{
console.log("unable to load image to the cloud" + xhr.readyState + ":" + xhr.status + ":" + xhr.responseText)
}
};

fd.append('upload_preset', this.unsignedUploadPreset);
fd.append('tags', emailid); // Optional - add tag for image admin in Cloudinary
fd.append('file', this.base64Image);
xhr.send(fd);

它打印：无法将图像加载到云端 4:0:

Answer 1

我对你的代码有点困惑，因为看起来你在实际发送任何内容之前试图访问响应。 我建议使用 Cloudinary SDK 之一，因为它会让您的生活更轻松。

https://cloudinary.com/documentation/image_upload_api_reference#upload_examples

这是另一个使用 Ionic 和 Capacitor 上传的示例。

https://devdactic.com/ionic-image-upload-capacitor