【问题标题】:Ionic 2/3: Error while uploading Image using Node JSIonic 2/3:使用 Node JS 上传图像时出错
【发布时间】:2018-10-24 00:39:39
【问题描述】:

我正在尝试从 Gallery/Camera 上传图像。我的后端是 Nodejs。我可以上传一个文件,但它似乎不是 jpeg。它看起来像一个没有任何扩展名的编码文件,我收到此错误:

{"code":3,"source":"file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1526315072575.jpg","target":"@987654321 @","http_status":null,"body":null,"exception":"com.android.okhttp.Address@cff2e20a 上的流意外结束"}

这里是Node Js:

var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var app = express();
var server = require('http').Server(app);
var mongoose = require('mongoose');                 // mongoose for mongodb
var port = process.env.PORT || 8000;                // set the port
var database = require('./config/database');            // load the database config
var morgan = require('morgan');
var methodOverride = require('method-override');
var io = require('socket.io')(server);
var cors = require('cors');
var multer = require('multer');
var messageId = {};
var fs = require('fs');
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({'extended': 'true'})); // parse application/x-www-form-urlencoded
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({type: 'application/vnd.api+json'})); // parse application/vnd.api+json as json
app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
app.use(cors());
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  next();
});

 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());

var upload = multer({dest :'user-img/'});

var uploadTradeRouter = express.Router();

uploadTradeRouter.post('/trade' , upload.any() , function(req, res, next){
         console.log('trade data called' +req);
});
app.use('/upload' , uploadTradeRouter);
app.listen(port);

这是我的上传图片.ts

import { Component, ViewChild  } from '@angular/core';
import { NavController, Navbar, NavParams ,Platform,AlertController,ToastController, LoadingController, ActionSheetController, ModalController} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
import { Camera} from '@ionic-native/camera';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { ImagePicker } from '@ionic-native/image-picker';
import { Crop } from '@ionic-native/crop';
import { Http, Response } from '@angular/http';
const URL = "http://192.168.43.50:8000/upload/trade";

 NewImage()
  {
    let imageActionSheet = this.actionSheet.create({
      title:"Select Image Source",

      buttons:[
        {
          text:"Use Camera",
          handler:()=>{
           // this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY)
           this.takePicture();
          }
        },
        {
          text:"Choose from Gallery",
          handler:()=>{
            this.browsePicture()

          }
        },
        {
          text:'Cancel',
          role:'cancel'
        }
      ]
    });
    imageActionSheet.present();
  }

  public takePicture(){
    var options = {
      quality :70,
      destinationType: this.camera.DestinationType.FILE_URI,
      saveToPhotoAlbum:false,
      correctOrientation:true,      
      sourceType:this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG

    }; 
    this.camera.getPicture(options).then(data=>{
      this.UploadImage(data)   
    }).catch((err)=>{
      console.log("Camera error :", err)
    }
    )
  }
  UploadImage(imagePath){
    const fileTransfer: FileTransferObject = this.transfer.create();
    let imageURI = imagePath.split('?').shift()
    let loader = this.loadingScreen.create({
      content:"Uploading. Please wait"
    });
    let options = {
      fileKey: "file",
      fileName: 'profilepic',
      chunkedMode: false,
      mimeType: 'image/jpeg',


    };
   //this.formData = new FormData()

    //this.formData.append('photo',{imageURI})
    loader.present();
    //     this.http.post(URL,this.formData).map((res:Response)=>res.json()).subscribe((success)=>{
    //   console.log(success._body);
    // },(error)=>{console.log(error);loader.dismiss()})

    fileTransfer.upload(imageURI,URL,options).then((entry) => {

       console.log("Upload Method");
      }, (err) => {
        loader.dismiss();
        console.log("uplaod error>",JSON.stringify(err)
      );
      });
 }

我无法理解,问题可能出在哪里?任何指针都会非常有帮助。

【问题讨论】:

    标签: node.js ionic3


    【解决方案1】:

    请检查以下功能以从图库中获取图像

    getFromGallery(){
    var that = this;
    const options: CameraOptions = {
        quality: 100,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        saveToPhotoAlbum: false,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
    this.camera.getPicture(options).then((imageData) => {
        that.imageUrl = "data:image/jpeg;base64," + imageData.replace(/(\r\n|\n|\r)/gm, '');
        that.imageDataUrl = "data:image/jpeg;base64," + imageData.replace(/(\r\n|\n|\r)/gm, '');
    }, (err) => {
        console.log(err);
    });
    }
    

    借助上述函数,我们将在变量中获取图像数据。然后只需将此值发送到后端。并将数据写入

    uploadImage = function(req, res){
    var return_val = {};
    var imageData = req.body.profile_image;
    imageBuffer = decodeBase64Image(imageData);
    var imageType = imageBuffer.type;
    
    var typeArr = new Array();
    typeArr = imageType.split("/");
    
    var fileExt = typeArr[1];
    
        if((fileExt === 'jpeg') || (fileExt === 'JPEG') || (fileExt === 'JPG') || (fileExt === 'jpg') || (fileExt === 'PNG') || (fileExt === 'png')) {
        if (imageBuffer.error) return imageBuffer.error;
        var image_name = Date.now()+"_"+req.user._id + '.'+ fileExt;
        var imagePath = "public/uploads/profileImage/"+image_name;
    }    
    fs.writeFile(imagePath, imageBuffer.data, function(imgerr, img) {
        if (imgerr) {
            res.json(imgerr);
        } 
        else {
    
            userModel.findOneAndUpdate({"_id":req.user._id},{$set:{"profile_image":image_name}}, function(errUpdate, dataUpdate){
                if(errUpdate){
                    return_val.success = false;
                    res.json(return_val);
                }
                else{
    
                    //code to unlink previous file
                    fs.unlink("public/uploads/profileImage/"+dataUpdate.profile_image, function(errDel, dataDel){
                        if(errDel){
                            console.log(errDel);
                        }
                        else{
                            return_val.profile_image = image_name;
                            return_val.success = true;
                            res.json(return_val);        
                        }
                    });
                    //End of code to unlink previous file 
    
    
                }
            });
        }
    
    });
    

    }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-13
      • 1970-01-01
      • 1970-01-01
      • 2015-01-12
      • 2020-09-26
      相关资源
      最近更新 更多