Cordova 图片上传在爱奥尼亚4与相机和文件插件

我正试图将Ionic 4中的文件上载到服务器，但获取错误

第二个参数必须为blob

但我已经记录了水滴图像，它正在正常运行

我在下面的链接中找到了指南

我不需要将其保存到本地存储，因此跳过了该部分

选择ImageGallery（）{
常量选项：摄影机选项={
质量：100，
sourceType:this.camera.PictureSourceType.PHOTOLIBRARY，
destinationType:this.camera.destinationType.FILE\u URI，
编码类型：this.camera.encodingType.JPEG，
mediaType:this.camera.mediaType.PICTURE，
saveToPhotoAlbum:false
};
这个.camera.getPicture（选项）。然后(
imageData=>{
const formData=this.uploadAvatar（imageData）；
上传头像（formData）；
},
错误=>{
this.toastService.presenttoastbooth（'未能选择图像'）；
}
);
}
上传头像（图像路径：任意）{
让fileName=''；
这个文件
.resolveLocalFilesystemUrl（图像路径）
。然后（fileEntry=>{
const{name，nativeURL}=fileEntry；
const path=nativeURL.substring（0，nativeURL.lastIndexOf（'/'）；
fileName=名称；
返回此.file.readAsArrayBuffer（路径、名称）；
})
。然后（缓冲区=>{
const imgBlob=新Blob（[buffer]{
键入：“图像/jpeg”
});
console.log（imgBlob）；
const formData:formData=new formData（）；
append（'avatar'，imgBlob）；
this.userService.updateAvatar（formData）.then（res=>{
控制台日志（res）；
this.loader.hideLoader（）；
//如果（res.data.status==='success'）{
//this.user=res.data.user；
//}否则如果（res.data.status=='error'）{
//this.toastService.presentToast（res.data.message）；
//}其他{
//this.toastService.presentToast（'服务器错误'）；
// }
});
});
}
服务
公共异步updateAvatar（postData:any）{
常量httpOptions={
标题：新的HttpHeaders({
“内容类型”：“多部分/表单数据”，
“X-授权”：environment.appKey，
授权：localStorage.getItem（'TOKEN\u KEY'）
})
};
const res=wait this.http
.邮政(
environment.apiUrl+“用户/更新配置文件图片”，
postData，
httpOptions
)
.toPromise（）；
按任何方式返回res；
}

您对本教程的关注程度如何

正如我在观看Simon的视频（devdactic作者）时所回忆的那样，处理图像时存在一些复杂问题，您需要在系统上至少创建一个临时文件以发送到其他地方

首先，您应该严格按照教程进行操作，然后一旦它起作用，您就可以尝试删除内容

在本教程的第一部分中，它明确指出：

• 使用POST请求从其本地路径上载文件

所以我不认为仅仅删除教程中的大块内容是让这一切顺利进行的最佳技巧

先向专家学习，以后再修改。

uploadBase64（imageBase64:any）{
    uploadBase64(imageBase64: any) {
    this.loader.showLoader();
    const blobImg = this.dataURItoBlob(imageBase64);
    const formData: FormData = new FormData();
    formData.append('avatar', blobImg, 'image.jpeg');
    this.profileService.updateAvatar(formData).then(res => {
      this.loader.hideLoader();
      if (res.data.status === 'success') {
        this.user.avatar = imageBase64;
      } else if (res.data.status === 'error') {
        this.toastService.presentToast(res.data.message);
      } else {
        this.toastService.presentToast('Server Error');
      }
    });
  }

  dataURItoBlob(dataURI: any) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    let byteString: any;
    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = unescape(dataURI.split(',')[1]);
    }
    // separate out the mime component
    const mimeString = dataURI
      .split(',')[0]
      .split(':')[1]
      .split(';')[0];
    // write the bytes of the string to a typed array
    const ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], { type: mimeString });
  }

  async openCertificateUploadPage() {
    const modal = await this.modalCrtl.create({
      component: CertificateUploadPage
    });
    modal.onDidDismiss().then(res => {
      this.getProfile();
    });
    return await modal.present();
  }

this.loader.showLoader（）；
const blobImg=this.dataURItoBlob（imageBase64）；
const formData:formData=new formData（）；
append（'avatar'，blobImg'，image.jpeg'）；
this.profileService.updateAvatar（formData）.then（res=>{
this.loader.hideLoader（）；
如果（res.data.status==='success'）{
this.user.avatar=imageBase64；
}else if（res.data.status=='error'）{
this.toastService.presentToast（res.data.message）；
}否则{
this.toastService.presentToast（'服务器错误'）；
}
});
}
dataURItoBlob（dataURI:any）{
//将base64/URLEncoded数据组件转换为字符串中的原始二进制数据
让byteString：任何；
if（dataURI.split（'，'）[0].indexOf（'base64'）>=0）{
byteString=atob（dataURI.split（'，）[1]）；
}否则{
byteString=unescape（dataURI.split（'，）[1]）；
}
//分离出mime组件
常量mimeString=dataURI
.split（“，”）[0]
.split（“：”）[1]
.split（“；”）[0]；
//将字符串的字节写入类型化数组
const ia=新的Uint8Array（byteString.length）；
for（设i=0；i{
这是一个.getProfile（）；
});
return wait modal.present（）；
}

---

这就是解决这个问题的办法。我已经弄明白了。

您是否尝试过将图像作为base64字符串上传，而不是将其转换为blob？谢谢，我已经制作了blob图像，现在它工作正常。不幸的是，这不是解决问题的好方法。对base64选项进行一些研究，它会占用大量内存并使设备崩溃。@RTPhary对不起，您知道避免使用base64的最佳方法是什么，或者使用的最佳实践是什么吗？不是代码，只是想法。如果你有代码就好了。谢谢我会查看Devdactic/Ionic Academy，Simon写了很棒的教程，我感觉他已经涵盖了这一点。