web-dev-qa-db-ja.com

Multerを使用してアップロードされたファイルの名前を変更できない（Express.js）

Express.jsとMulterを使用してHTMLフォームからファイルをアップロードしようとしています。ファイルを目的の場所（uploadsという名前のフォルダー）に保存できました。

ただし、アップロード時にファイル名を変更したいのですが、デフォルトでは、Multerは次のような奇妙な名前を付けています。

5257ee6b035926ca99923297c224a1bb

16進数のタイムスタンプのようですが、後でスクリプトを呼び出すために、より明示的な名前が必要です。

私は見つかった説明に従いました here が、それは以前よりも何もしません：ヘキサ名でファイルをアップロードします。

また、2つのイベントonFileUploadStartとonFileUploadCompleteは、コンソールに何も記録されません。

サーバーとルーティングに2つの別々のファイルを使用しています。

app.js

/**
 * Dependencies
 */

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

/**
 * Importation of routes
 */
var routes = require('./routes/index');
var recog = require('./routes/recog');

/**
 * Express
 */
var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// pour contrer les erreurs de cross domain
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

/**
 * Routes
 */
app.use('/', routes);
app.use('/recog', recog);

module.exports = app;

recog.js

/**
 * Requirements
 */
var express = require('express');
var router = express.Router();
var multer = require('multer');
var uploads = multer({
    dest: 'uploads/',
    rename: function (fieldname, filename) {
        console.log("Rename...");
        return filename + Date.now();
    },
    onFileUploadStart: function () {
        console.log("Upload is starting...");
    },
    onFileUploadComplete: function () {
        console.log("File uploaded");
    }
});

/**
 * Upload d'une image
 */
router.post('/upload', uploads.single('image'), function (req, res, next) {
    console.log("Front-end is calling");
    res.json({status: 'success', data: 'Fichier chargé.\nOrgane sélectionné : ' + req.body.organ});
});

module.exports = router;

私はいろいろと調べてきましたが、Node.jsとJavaScriptを一般に初めて使用するので、何が問題なのか理解できません。

助けてくれてありがとう！

javascriptnode.jsexpressuploadmulter
12
Vincent Montalieu

Multerの使用法が変更されました。

現在、Multerコンストラクターは3つのオプションしか受け入れません。

  1. dist/storage
  2. fileFilter
  3. 限界

名前変更、onFileUploadStart、onFileUploadCompleteが機能しなくなりました。

ただし、DiskStorageを使用して名前を変更できます

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, '/tmp/my-uploads')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

これらのリンクを見てください：

23
Gaurav Gupta

私はこの投稿が古いことを知っています。後で到着するかもしれない人に貢献したいです。以下は、ランダムに保存された画像名とファイル拡張子を持つ複数のアップロードされた画像を処理するための完全に機能するサーバースクリプトです。

var express = require("express");
var multer = require("multer");
var app = express();
var path = require("path");
var uuid = require("uuid");

// Allow cross Origin resource sharing (CORS) within our application
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");
    next();
});

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploadedimages/')
  },
  filename: function (req, file, cb) {
    cb(null, uuid.v4() + path.extname(file.originalname));
  }
})

var upload = multer({ storage: storage })

// "files" should be the same name as what's coming from the field name on the client side.
app.post("/upload", upload.array("files", 12), function(req, res) {
    res.send(req.files);
    console.log("files = ", req.files);
});

var server = app.listen(3000, function() {
    console.log("Listening on port %s...", server.address().port);
});
8
Thomas Thai

日付を使用してファイルにランダムな名前を付け、file.mimetypeを使用して元のファイル拡張子を追加します

console.log（file.mimetype）を試すと、ファイル名と拡張子が「/」で区切られて取得され、配列に分割して拡張子を取得します。以下のコードを試してください。

let storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    let extArray = file.mimetype.split("/");
    let extension = extArray[extArray.length - 1];
    cb(null, file.fieldname + '-' + Date.now()+ '.' +extension)
  }
})
const upload = multer({ storage: storage })
4
VISHNU Radhakrishnan

私が使っているこの方法を試してください

  var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
      console.log(file);
      var fileObj = {
        "image/png": ".png",
        "image/jpeg": ".jpeg",
        "image/jpg": ".jpg"
      };
      if (fileObj[file.mimetype] == undefined) {
        cb(new Error("file format not valid"));
      } else {
        cb(null, file.fieldname + '-' + Date.now() + fileObj[file.mimetype])
      }
    }
  })

  var upload = multer({ storage: storage })
3
Pradeep Saini

個人的に私は次のソリューションを実装しました。これはファイルのランダムな名前を生成し、元のファイル拡張子を追加します（私の拡張子は最後の。の後にあると想定しています）。

var path = require('path');

    var options = multer.diskStorage({ destination : 'uploads/' ,
      filename: function (req, file, cb) {
        cb(null, (Math.random().toString(36)+'00000000000000000').slice(2, 10) + Date.now() + path.extname(file.originalname));
      }
    });

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

    router.post('/cards', upload.fields([{ name: 'file1', maxCount: 1 }, { name: 'file2', maxCount: 1 }]), function(req, res, next) {
    /*
      handle files here
      req.files['file1']; //First File
      req.files['file2']; //Second File
      req.body.fieldNames;//Other Fields in the form

    */
    });


MULTERのドキュメントには、次の情報が含まれています。

ディスクストレージエンジンは、ディスクへのファイルの格納を完全に制御します。

2つのオプションdestinationおよびfilenameを使用できます。これらはどちらも、ファイルを保存する場所を決定する関数です。

注：関数として宛先を指定する場合は、ディレクトリを作成する必要があります。文字列を渡すとき、multerはディレクトリが作成されることを確認します。

filenameは、フォルダー内でファイルの名前を決定するために使用されます。ファイル名を指定しない場合、各ファイルには、ファイル拡張子を含まないランダムな名前が付けられます。

注： Multerはファイル拡張子を追加しません。関数は、ファイル拡張子が付いた完全なファイル名を返す必要があります。

1
user2517028

ファイルの構造は次のとおりです。

{
"fieldname": "avatar",
"originalname": "somefile.pdf",
"encoding": "7bit",
"mimetype": "application/pdf",
"destination": "./uploads",
"filename": "36db44e11b83f4513188f649ff445a2f",
"path": "uploads\\36db44e11b83f4513188f649ff445a2f",
"size": 1277191

}

次の例では、デフォルトのような奇妙な名前ではなく、元の名前に拡張子を付けてファイルを保存します。 （「file.originalname」の代わりに、必要に応じて保存できます）

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads') //Destination folder
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname) //File name after saving
  }
})

var upload = multer({ storage: storage })
0
runha