将图像从 ionic 上传到 express.js multer答案

【问题标题】：upload image from ionic to express.js multer将图像从 ionic 上传到 express.js multer
【发布时间】：2016-04-21 05:37:26
【问题描述】：

我已经尝试过很多方式，但仍然没有运气这里是我的离子框架上传图像的代码（你可以简单地复制粘贴它，然后在 android 上运行它）

angular.module('starter.controllers', ['ngCordova'])

.controller('DashCtrl', function ($scope, $cordovaCamera,$cordovaFileTransfer, $http) {


$scope.takePic = function () {
var options = {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: 0, // 0:Photo Library, 1=Camera, 2=Saved Photo Album
    encodingType: 1 // 0=JPG 1=PNG
}
navigator.camera.getPicture(onSuccess, onFail, options);
}

var onSuccess = function (FILE_URI) {
//console.log(FILE_URI);
$scope.picData = FILE_URI;
//$scope.picData = LZString.compressToUTF16(FILE_URI)
$scope.$apply();
};

var onFail = function (e) {
console.log("On fail " + e);
}

$scope.send = function () {

var options = {
    fileName: $scope.picData.substr($scope.picData.lastIndexOf('/') + 1),
    chunkedMode: false,
    mimeType: "image/png"
};

console.log($scope.picData);
$cordovaFileTransfer.upload('http://localhost:8001/upload2', $scope.picData, options).then(function (result) {
        console.log("SUCCESS: " + JSON.stringify(result.response));
    },
    function (err) {
        console.log("ERROR: " + JSON.stringify(err));
    },
    function (progress) {
        console.log(progress);
    });

 }
})

我从库中获取图像并获取 url 没有问题。下面的代码是我使用 multer 完成工作的服务器端代码。

var express = require('express');
var http = require('http');
var multer = require('multer');
var bodyParser = require('body-parser');
var multerS3 = require('multer-s3');
var aws = require('aws-sdk');
var app = express();



app.use(bodyParser.json({
limit: '50mb'
 }));
 app.use(bodyParser.urlencoded({
limit: '50mb',
  extended: true
 }));

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
next();
});


var storage = multer.diskStorage({

destination: function (req, file, callback) {
callback(null, './uploads');
console.log('hit storage');
},
filename: function (req, file, callback) {
callback(null, file.fieldname + '-' + Date.now());
console.log('hit storage');
 }
});

var upload = multer({
storage: storage
}).single('userPhoto');


app.post('/upload2', function (req, res) {
console.log('hit post');
upload(req, res, function (err) {
if (err) {
    console.log(err);
    //console.log(req);
    return res.end("Error uploading file.");
} else {
    console.log('done');
    res.end("File is uploaded");
}

});
});

您可以简单地将上述代码复制并粘贴到 server.js 中并进行测试。

我得到的错误是这样的

{ [Error: Unexpected field]
code: 'LIMIT_UNEXPECTED_FILE',
field: 'file',
storageErrors: [] }

仅供参考：我使用 chrome 检查设备功能在我的 android 中运行 localhost。 (chrome://inspect/#devices)。

另一件事，为什么我会得到这样的图片网址

“content://com.android.providers.media.documents/document/image%3A42”

缺少格式，有什么意义吗？

我的离子信息

您的系统信息：

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.4
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v5.7.0
Xcode version: Xcode 7.2.1 Build version 7C1002

【问题讨论】：

仅传递图像的 url 在 multer 中不起作用，它是 body-parser 模块的扩展。因此，您需要将图像或文件与请求正文一起传递。对于userPhoto 问题，请删除single 标签，因为它只允许上传名称为userPhoto 的单张照片。 multer({storage:storage, fileFilter : fileFilter}).any();

标签： angularjs node.js express ionic-framework multer

【解决方案1】：

试试这个上传图片：

  var fs = require('fs');
      var tmp_path = fs.createReadStream(req.files.image.path);
        var target_path = './public/images/' + req.files.file.name +  randomNumber;

fs.rename(tmp_path, target_path, function(err) {
           // if (err) throw err;

            fs.unlink(tmp_path, function() {
               // if (err) throw err;
                //res.send('File uploaded to: ' + target_path + ' - ' + req.files.file.size + ' bytes');
            });
          });

【讨论】：

【解决方案2】：

我有完全相同的问题，我发现在使用 multer 时，我们必须确保此行上的名称（在您的情况下为“userPhoto”） .single('userPhoto');与您的 html 表单中的文件名匹配，问题是我们没有使用 html 表单来获取任何图像，我们使用 cordova 插件从相机中获取它们。我用 POSTMAN 测试了端点，它可以在请求正文中加载图像并指定相同的名称“userPhoto”作为键。希望这很快得到任何有用的答案。

【讨论】：