ngx-image-cropper 输出属性文件具有未定义的名称

Question

我正在使用ngx-image-cropper 在我的 Angular 应用程序中裁剪图像。我使用返回"文件"的输出属性，即(图像裁剪文件(来抓取裁剪后的图像。我需要裁剪后的图像具有文件名，以便我可以使用 name 属性循环访问后端的文件，而默认情况下它是未定义的。我怎样才能给它起个名字？ 我尝试了以下方法：在表单数据上，

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
}

以及裁剪触发的方法

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
}

上传器在没有裁剪器的情况下工作。

Answer 1

将文件转换为 blob，您可以自己命名 blob

const blobImage = file as Blob;

参考 ： https://github.com/Mawi137/ngx-image-cropper/issues/91#issuecomment-422252629

Answer 2

这对我有用：

// 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});
}