[英]ngx-image-cropper Output property file having undefined name
I am using ngx-image-cropper to crop an image in my angular app.我正在使用ngx-image-cropper在我的 angular 应用程序中裁剪图像。 I use the Output property returning 'File' which is (imageCroppedFile) to be able to grab the cropped image.
我使用输出属性返回“文件”,即 (imageCroppedFile) 能够抓取裁剪后的图像。 I need the cropped image to have a file name, so that I can iterate through the files on the back end using the name attribute, while it is by default undefined.
我需要裁剪的图像有一个文件名,以便我可以使用 name 属性遍历后端的文件,而默认情况下它是未定义的。 How can I give it a name?
我怎样才能给它起个名字? I tried the following: On the FormData,
我尝试了以下操作:在 FormData 上,
var formData:any = new FormData();
console.log('The number of files is '+files.length);//Logs the number of files is 1
for(var i=0; i<files.length;i++) {
formData.append("uploads[]", files[i].name, 'image'+i);
console.log('File name '+ i + ' ' +files[i].name);//Logs File name 0 undefined
}
and on the method triggered by the cropping以及由裁剪触发的方法
imageCroppedFile(image: File) {
this.filesToUpload = [];
console.log('imageCroppedFile method '+image.name+ ' size is '+image.size);// Logs imageCroppedFile method undefined size is 380284
this.filesToUpload[0]=image;
console.log('The filesToUpload is '+this.filesToUpload[0].name);// Logs The filesToUpload is undefined
}
The uploader works without the cropper.上传器在没有裁剪器的情况下工作。
cast your file into blob, and you can name your blob by yourself将您的文件转换为 blob,您可以自己命名您的 blob
const blobImage = file as Blob;
Reference : https://github.com/Mawi137/ngx-image-cropper/issues/91#issuecomment-422252629参考: https : //github.com/Mawi137/ngx-image-cropper/issues/91#issuecomment-422252629
This works for me:这对我有用:
// grab the cropped area to file for upload
var b64File = this.dataURLtoFile(this.croppedImage, 'hello.jpg'); // you can name it anything.
dataURLtoFile(dataurl, filename): File {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.