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

【问题标题】：ngx-image-cropper Output property file having undefined namengx-image-cropper 输出具有未定义名称的属性文件
【发布时间】：2019-03-08 12:21:10
【问题描述】：

我正在使用ngx-image-cropper 在我的角度应用程序中裁剪图像。我使用输出属性返回“文件”，即 (imageCroppedFile) 来获取裁剪后的图像。我需要裁剪后的图像有一个文件名，这样我就可以使用 name 属性遍历后端的文件，而默认情况下它是未定义的。我怎样才能给它一个名字？我尝试了以下方法：在 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
}

关于裁剪触发的方法

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
}

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

【问题讨论】：

您在控制台日志图像中看到的所有属性是什么？
@Ritesh File(390053) {name: "blob", lastModified: 1538659450015, lastModifiedDate: Thu Oct 04 2018 16:24:10 GMT+0300 (East Africa Time), webkitRelativePath: "",大小：390053，…}
我也面临同样的问题

标签： angular image typescript cropper

【解决方案1】：

将你的文件转换成blob，你可以自己命名你的blob

const blobImage = file as Blob;

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

【讨论】：

blobImage 然后只有类型和大小作为属性。能详细点吗？

【解决方案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});
    }

【讨论】：