时间戳

首页 > 解决方案 > 如何使用 multer 将文件正确上传到 fs

javascript - 如何使用 multer 将文件正确上传到 fs

问题描述

我第一次尝试 multer，我对如何上传所选文件感到困惑。我使用 ajax 成功建立了与后端的连接，而我感到困惑的是

  1. 我是否分配了文件输入数据以正确发送到后端？我正在获取输入文件元素的原始值输出并将其当前发送到后端。那是正确的方法吗？
  2. 当在我的后端调用 multer 上传功能时app.post，“myFile”upload.single('myFile')目前代表什么，我假设它是从客户端发送的文件名。那正确吗？
  3. 最后如何分配特定目录以将上传的文件保存在 fs 中？任何帮助表示赞赏。提前致谢。
const express = require('express');
const multer = require("multer")
const path = require('path');
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
const port = process.env.PORT || 3000
var cors = require('cors');

app.use(cors());
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.listen(port, () => {
  console.log('Server is up on port ' + port);
})

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/")
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname)
  },
})

const uploadStorage = multer({
  storage: storage
})

app.post('/uploadImage', upload.single('myFile'), (req, res, next) => {
  try {
    res.send(req.body);
    console.log(req.body.chooseFileValue)
  } catch (error) {
    console.log(error);
    res.send(400);
  }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</head>

<body>
  <h1>Single File Upload Demo</h1>

  <form name="mainForm" action="/uploadProfilePicture" enctype="multipart/form-data" method="POST">

    <span>Upload Profile Picture:</span>
    <input type="file" name="mypic" id="chooseFile" required /> <br>
    <button type="button" class="uploadBtn" id="uploadBtn">Upload</button>
  </form>

  <script>
    var chooseFile = document.getElementById('chooseFile')
    $('#uploadBtn').click(function() {
      console.log(chooseFile.value)
      $.ajax({
        url: 'http://localhost:3000/uploadImage',
        type: 'POST',
        "crossDomain": true,
        headers: {
          "accept": "application/json",
          "Access-Control-Allow-Origin": "*"
        },
        cache: false,
        data: {
          "chooseFileValue": chooseFile.value
        },
        success: function(data) {
          console.log(data)
        },
        error: function(jqXHR, textStatus, err) {
          alert('text status ' + textStatus + ', err ' + err)
        }
      })
    });
  </script>
</body>

</html>

标签： javascriptnode.jsmulter

解决方案

推荐阅读