2017-01-05 34 views
2

利用可能なインターネットチュートリアルがたくさん試されましたが、まだ機能させることはできません。私はNodeJSにmulterモジュールを使用し、AngularJSにはng-file-uploadを使用します。私は、2つのシナリオがあり、両方のアップロードが別のフォルダに移動しなければならないので、マルチタ設定で2つのヘルパーを作った。バックエンドファイルはAPP/APP_BACK /フォルダにありますので、宛先パスでは1つのフォルダに戻り、APP_FRONT/images/headerと入力します。ここで1つのヘルパー・スニペット(/helpers/uploadHeader.js)である:NodeJS&Angular Imageアップロード

var storage = multer.diskStorage({ 
destination: function (req, file, callback) { 
    callback(null, '../APP_FRONT/images/header/'); 
}, 
filename: function (req, file, callback) { 
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); 
    callback(null, file.fieldname + '-' + '.' + ext); 
} 

}); 
var upload = multer(
    {storage: storage} 
); 

var helper = { 
    upload: upload 
}; 

module.exports = helper; 

ここでルータファイルである:

var headerHelper= require('../helpers/uploadHeader'); 

router.post('/header', headerHelper.upload.single('header'), function(req, res, next) { 
    headerHelper.upload(req, res, function(err){ 
     if(err){ 
      res.status(400).send(err); 
      console.log(err); 
      return; 
     } 
     res.status(200).send({ code:200, message:'Header upload successful!' }); 
    }); 
}); 

「ヘッダ」入力フォームまたはポストマンのキー値の名前であろう。角度において

、私はアプリケーションの「ngFileUpload」モジュールを注入し、所望のコントローラに「アップロード」サービスを注入し、クライアント側でフォーム内のボタン上に結合されuploadHeader()関数の中にそれを使用する:

$scope.uploadHeader = function (file) { 
     Upload.upload({ 
      url: 'http://localhost:3003/upload/header', 
      method: 'POST', 
      file: file 
     }).then(function (response) { 
      console.log('Success ' + response.config.data.file.name + 'uploaded. Response: ' + response.data); 
     }, function (error) { 
      console.log('Error status: ' + error.status); 
     }, function (evt) { 
      var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
      console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
     }); 

私は郵便配達してみました:

Postman request SS

そして、このエラーが出ます:

"エラー:ENOENT:そのようなファイルやディレクトリはありません、オープン' C:ユーザー名\デスクトップ\ APP \ APP_FRONT \画像\ \ Users \ユーザーヘッダーの\ header.jpg '"

私はクライアント側からしようとすると、私はこれらを取得しますエラー:

"エラー:予期しないフィールド
    makeError
で" と は "TypeError例外は:DBGは未定義です"

私は既にGoogleに相談し、トンチュートリアルのいくつかをriedが、これに固執しています。

+0

"TypeError:dbg is undefined"はmozillaのファイヤーバグエラー – AlainIb

+0

あなたはあなたの 'html'コードを提供しますか?私はエラーがあると信じています。 'name'属性の値が' header'であることを確信していますか? –

答えて

1

ルーターでは、マルチパーツフォームデータの中で「ヘッダー」と呼ばれるオブジェクトを探すようにマルチーターに指示しています。あなたのangularJSコードは、それを「ファイル」というオブジェクトとして追加しています。

あなたからルータにラインを変更する場合は、次へ

router.post('/header', headerHelper.upload.single(**'header'**), function(req, res, next) { 
//..... 
    } 

router.post('/header', headerHelper.upload.single(**'file'**), function(req, res, next) { 
//.... 
} 

それはトリックを行う必要があります。

1

EDIT:ソリューションは

を発見したが実際には、multerのstorate設定でファイル名の機能に問題でした。上記の記事で、私はフィールド名にdatetimestampとファイル拡張子を追加:

filename: function (req, file, callback) { 
    var datetimestamp = moment().format('DD-MM-YY_HH:mm:ss'); 
    var filename = file.originalname; 
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); 

    callback(null, file.fieldname + '-' + datetimestamp + '.' + ext); 
} 

を何らかの理由で、アップロードを完了できませんでしたし、私はエラーを得ました。

私は、ファイルのORIGINALNAMEを返すために、ファイル名の機能を変更:

filename: function (req, file, callback) { 
     callback(null, file.originalname); 
    } 

と今ではすべてがOKです。しかし今、質問は、なぜカスタムファイル名が機能しないのですか?

関連する問題