我搜索了很多文档,发现很多人有同样未解决的问题。在实际上传之前,我一直尝试使用裁剪来裁剪上传的图像。裁剪功能都可以正常工作,但是上传的是未经裁剪的原始版本。从那以后,我了解到我需要以某种方式检索裁剪的版本,因为它没有添加到表单中。它被转换为base64,我已将其分配给变量,但是我不知道如何将其添加到表单数据中。任何帮助都将一如既往。
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: { width: 300, height: 400 }
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
var form = document.getElementById("add-event-form");
var ImageURL = resp // Split the base64 string in data and contentType
alert(ImageURL);
var block = ImageURL.split(";");
// Get the content type of the image
var contentType = block[0].split(":")[1];// In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."
// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);
// Create a FormData and append the file with "image" as parameter name
var formDataToUpload = new FormData(form);
formDataToUpload.append("image1", blob);
return ImageURL;
});
});
// End upload preview image
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
我设法找到了需要的数据并将其保存到ImageUrl,但是我需要将其作为数据附加到#add-event-form。请帮忙!