node.js - 如何在文件更改事件中从 Angular 中的 ngx-image 裁剪器裁剪后将图像上传到节点
问题描述
下面是我的功能
UploadImage(){
let file: File = this.fileToReturn; //fileToReturn is returned file from the cropper
let formData:FormData = new FormData();
formData.append('uploadFile', file, file.name);
console.log(JSON.stringify(formData))
formData.forEach((value,key) => {
console.log(key+" "+value)
})
this.authservice.uploadPhoto(formData)
.subscribe(
(response) => {
console.log('response received is ', response);
}
)
// debugger;
// console.log(formData);
}
将值记录到控制台和服务器后,我得到空的 json '{}'。应该做什么?我必须使用任何其他库吗?
解决方案
UploadImage(){
let file: File = this.fileToReturn;
let formData:FormData = new FormData();
formData.append('uploadFile', file, file.name);
console.log(JSON.stringify(formData))
formData.forEach((value,key) => {
console.log(key+" "+value)
})
this.authservice.uploadPhoto(formData)
.subscribe(
(response) => {
console.log('response received is ', response);
this.openSnackBar('Profile picture updated!','Close');
// this.shared_user.getProfilepic(response);
}
)
// debugger;
// console.log(formData);
}
base64ToFile(data, filename) {
const arr = data.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
console.log(this.croppedImage);
this.fileToReturn = this.base64ToFile(
event.base64,
this.imageChangedEvent.target.files[0].name,
)
return this.fileToReturn
}
这对我有用
推荐阅读
- reactjs - ReactJS 中的访问控制允许来源问题
- linux - 在同一目录但从不同的操作系统(双启动)中使用 git 是否安全?
- flutter - 如何在不失去对身份验证上下文的访问权限的情况下使用导航路线
- android - 要上传 Android App Bundle,您必须注册 Google Play 的 App Signing
- apache-nifi - 如何读取 NIFI 进程指标?
- git - Failed to init source control in vscode
- flutter - Accidentally deleted flutter default widget code, how do I fix it?
- databricks - Databricks - How to remove files , directories based on regular expression
- reactjs - Unable to run jest tests in React typescript. Jest encountered an unexpected token
- python - Connect Django to Azure Analysis Services