Question

我试图以多种方式做到这一点，仍然没有运气这里是我的离子框架上传图像的代码（你可以简单地复制粘贴它，并在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);
    });

 }
})

我从图书馆获取图片并获取网址没有问题。下面的代码是服务器端代码，我使用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 inspect device功能在我的android中运行localhost。（铬：//检查/＃设备）

另一件事，为什么我会像这样获得图像网址

＆＃34;内容：//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

Answer 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');
            });
          });

Answer 2

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

将图像从离子上传到express.js multer

2 个答案: