Как загружать, отображать и сохранять изображения с помощью узла.js и экспресс [закрыто]

Мне нужно загрузить изображение и отобразить его, а также сохранить его, чтобы я не потерял его при обновлении localhost. Это необходимо сделать с помощью кнопки" Загрузить", которая запрашивает выбор файла.

Я использую узел.js и express для серверного кода, и я действительно Новичок в программировании веб-приложений, любая помощь будет оценена.

спасибо заранее.

1 54
node.js image-processing iis-express image-uploading

1 ответ:

прежде всего, вы должны сделать HTML-форму, содержащую элемент ввода файла. Вы также должны установите форму enctype до multipart / form-data:

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="file" name="file">
    <input type="submit" value="Submit">
</form>

предполагая, что форма определена в .HTML-код хранится в каталоге с именем общественные относительно того, где находится ваш скрипт, вы можете служить это так:

const http = require("http");
const path = require("path");
const fs = require("fs");

const express = require("express");

const app = express();
const httpServer = http.createServer(app);

const PORT = process.env.PORT || 3000;

httpServer.listen(3000, () => {
  console.log(`Server is listening on port ${PORT}`);
});

// put the HTML file containing your form in a directory named "public" (relative to where this script is located)
app.get("/", express.static(path.join(__dirname, "./public")));

как только это будет сделано, пользователи будут иметь возможность загружать файлы на сервер через эту форму. Но чтобы повторно собрать загруженный файл в вашем приложении, вам нужно будет проанализировать тело запроса (как составные данные формы).

на Экспресс-3.x вы могли бы использовать express.bodyParser промежуточное программное обеспечение для обработки составных форм, но с Экспресс-4.x, нет парсера тела в комплекте с каркасом. К счастью, вы можете выбрать один из много имеющихся multipart / form-data parsers out там. Вот, я буду использовать мултэр:

вам нужно определить маршрут для обработки сообщений формы:

const multer = require("multer");

const handleError = (err, res) => {
  res
    .status(500)
    .contentType("text/plain")
    .end("Oops! Something went wrong!");
};

const upload = multer({
  dest: "/path/to/temporary/directory/to/store/uploaded/files"
  // you might also want to set some limits: https://github.com/expressjs/multer#limits
});


app.post(
  "/upload",
  upload.single("file" /* name attribute of <file> element in your form */),
  (req, res) => {
    const tempPath = req.file.path;
    const targetPath = path.join(__dirname, "./uploads/image.png");

    if (path.extname(req.file.originalname).toLowerCase() === ".png") {
      fs.rename(tempPath, targetPath, err => {
        if (err) return handleError(err, res);

        res
          .status(200)
          .contentType("text/plain")
          .end("File uploaded!");
      });
    } else {
      fs.unlink(tempPath, err => {
        if (err) return handleError(err, res);

        res
          .status(403)
          .contentType("text/plain")
          .end("Only .png files are allowed!");
      });
    }
  }
);

в приведенном выше примере,.png файлы, опубликованные в / upload будет сохранен в загруженные каталог относительно того, где находится скрипт.

чтобы показать загруженное изображение, предполагая, что у вас уже есть HTML-страница, содержащая img элемент:

<img src="/image.png" />

вы можете определить другой маршрут в своем экспресс-приложении и использовать res.sendFile для обслуживания сохраненного изображения:

app.get("/image.png", (req, res) => {
  res.sendFile(path.join(__dirname, "./uploads/image.png"));
});
128