web-dev-qa-db-ja.com

express-fileuploadを使用したファイルのアップロード

Express-fileuploadを使用してファイルをアップロードしようとしていますが、うまくいきません。正しいフォルダでアップロードされた画像をコンソールに表示できるという意味で、ファイル（この場合は画像）を「アップロード」できます。

startup.js

router.get('/upload', function(req, res) {
    res.render('upload');
});

router.post('/upload', function(req, res) {
    // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file 
  let startup_image = req.files.image;

  // Use the mv() method to place the file somewhere on your server 
  startup_image.mv('/images' , function(err) {
      if (err) {
          console.log(err);
      }
  });
});

次に、私のHTMLフォームは

<form ref='uploadForm' 
      id='uploadForm' 
      action='/upload' 
      method='post' 
      encType="multipart/form-data">
        <input type="file" name="image" />
        <input type='submit' value='Upload!' />
</form>
node.jsexpressfile-upload
6
user7102017

ファイルの移動先のディレクトリを指定していますが、ファイル名を指定していません。ユーザーにクライアント側のファイル名を決めてパスに追加させるとしましょう。

<input name="userFileName" type="text">//userFilename Here</input>

var myFILENAME = req.body.userFilename 
startup_image.mv('/images/'+myFILENAME+'.jpg', ..) //myFILENAME needs to be added here

express-fileupload でファイルをアップロードする方法の完全な例も参照してください

[〜＃〜]更新[〜＃〜]

追加する必要がある問題の解決策を見つけました__dirnameをこの行に追加すると、プログラムはsourceコードの現在のディレクトリを認識します。

startup_image.mv(__dirname + '/images' , function(err) {..

更新2

これが私のソースコードです。必要に応じて、これを試してみてください。

私のHTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form ref='uploadForm' encType="multipart/form-data" class="" action="/upload" method="post">
      <input type="text" name="fileName" value=""><br>
      <input type="file" name="foo" value=""><br>
      <input type="submit" name="" value="upload!">
    </form>
  </body>
</html>

私の主な情報源

var express = require("express);
var app = express();
const fileUpload = require('express-fileupload');
//npm install ejs, express, express-fileupload

//middleware
app.use(express.static(__dirname));
app.set('view engine', 'ejs');
app.use(fileUpload());

app.get('/inputFile', function(req, res){
  res.render('inputt');
});

app.post('/upload', function(req, res) {
  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
   var startup_image = req.files.foo;
   var fileName = req.body.fileName;
   // Use the mv() method to place the file somewhere on your server
   startup_image.mv(__dirname + '/images/' + fileName + '.jpg' , function(err) {
     if(err){
       console.log(err);
     }else{
    console.log("uploaded");
}
   });
 });

app.listen(7777);
5
user8377060
//install path module 
const path = require('path');

 // remaining code

let startup_image = req.files.image;

startup_image.mv(path.resolve(__dirname,'/images',startup_image.name), function(error){
  //remaining code
})
0
Antappan Thengummoodu

このソリューションは、非ejsおよびエクスポートモジュールソリューション用です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>File Upload</title>
  </head>
  <body>
    <form ref='uploadForm' encType="multipart/form-data" class="" action="/path/to/nodejs/upload/file" method="post">
      <input type="file" name="my_file"><br>
      <input type="submit" name="" value="upload">
    </form>
  </body>
</html>

これがNodeJSです

const express = require("express");
const app = express();
const fileUpload = require('express-fileupload');

app.use(fileUpload({ safeFileNames: true, preserveExtension: true }))

app.post('/', function(req, res) {
    // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
    let the_file = req.files.my_file;

    the_file.mv('/path/to/html/uploads/up/' + the_file.name , function(err) {

        res.writeHead(200, {"Content-Type": "text/plain"});
        if(err){
            console.log(err);
            res.write(err);
            res.end();
        } else {
            console.log("uploaded");
            res.write("upload of file "+the_file.name+" complete");
            res.end();
        } 

   });

});

module.exports = app;
0
Nelles

フォルダを作成する必要がありますimages！

0
Thức Trần