使用FileTransfer本地到NodeJs服务器的Ionic-3图像上传

Question

我关注了@Simon_Grimm博客中的一篇教程。这是一个简单的离子图像上传到Node.js。除了上传之外，一切都很正常。我可以显示图像从服务器到我的离子客户端，我可以删除以及。我的删除和获取图像的HTTP请求工作得很好。只有当我点击upload按钮时，它才无法与我的后端通信。它填充了提到http_status = null，body = null等的错误。我不能理解为什么不能工作？用于将文件上载到本机文件传输。据我所知，我的问题是，不知何故，我的upload方法无法触发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。不幸的是，它不能很好地工作。然后我将其取消注释。现在我从一周开始就拉扯头发了。

感谢您的努力

Answer 1

在ImageUploadSettingsProvider中，尝试更改此设置

mimeType: 'multipart/form-data',

到这个

mimeType: "image/jpg",