Ionic-3 Image使用FileTransfer Native上传到NodeJs服务器

Question

我按照@Simon_Grimm博客的教程之一进行了操作。这是一个简单的Ionic图像上传到Node.js.除了上传外，一切都很完美。我可以将图像从服务器显示到我的Ionic客户端，我可以删除。我的删除和获取图像的HTTP请求工作正常。只有当我点击上传按钮时，它才能与我的后端通信。它填充了提到http_status = null，body = null等错误。我无法理解为什么不起作用？用于将文件上载到本机文件传输。据我所知，我的问题是我的上传方法不能触发HTTP请求。如果有人能指导我，我会很高兴的。

我的图片上传服务提供商是

image-upload-setting.ts，这是我的uploadMethod。我的错误是在这个return filetransfer callback (err)=>触发的

import { Injectable } from '@angular/core';
import 'rxjs/Rx';
import {Http, Response} from "@angular/http";
import { Observable } from 'rxjs/Rx';
import { Headers } from '@angular/http';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';


@Injectable()
export class ImageUploadSettingsProvider {

  constructor(private http: Http, private transfer: FileTransfer, private file: File) {
    console.log('Hello ImageUploadSettingsProvider Provider');


  }



  imageUpload(imageData, desc){
    let requestUrl = 'http://localhost:5000/images/'+ 'upload'; 
    var destination = imageData; 

    var options: FileUploadOptions = {
          fileKey: 'file',
          chunkedMode: true,
          mimeType: 'multipart/form-data',
          params: { 'desc': desc }
    };
    const fileTransfer: FileTransferObject = this.transfer.create();
    return fileTransfer.upload(destination,requestUrl,options).then(
        (data)=>{
            console.log('ImageProvider Upload Data-',data); 
        },
        (err)=>{
            console.log( err ); 
        }
    )

  }; 



}

这意味着我的uploadMethod successfull .then((data)=>{})不起作用。

我的html.ts是

onSubmit(form: NgForm){
  this.imageProvider.imageUpload(this.imageUrl, form.value.desc).then(
    (res)=>{
        form.reset(); 
    },
    (err)=>{
        console.log(err); 
    }
  );
};


 onTakePhoto(){

      const options: CameraOptions = {
                quality: 100,
                encodingType: this.camera.EncodingType.JPEG,
                correctOrientation: true,
                allowEdit: true,
                destinationType: this.camera.DestinationType.FILE_URI,
                mediaType: this.camera.MediaType.PICTURE,
                sourceType: this.camera.PictureSourceType.CAMERA,
           }

       this.camera.getPicture(options).then((imageData)=>{


/*
          let base64Image = 'data:image/jpeg;base64,' + imageData;
           this.imageUrl = base64Image   */


       this.imageUrl = imageData; 


    }, (err) => {
          const toast = this.toastCtr.create({
              message:'Could Not save the image. Please try again',
              duration:2500
            });
            toast.present();
            this.camera.cleanup();
        });

}

我试图将格式更改为base64。不幸的是它没有那么好用。然后我取消注释它。现在我从1个星期开始拔头发。

谢谢你的努力

Answer 1

在ImageUploadSettingsProvider中，尝试更改此设置

mimeType: 'multipart/form-data',

对此

mimeType: "image/jpg",