Cách tải lên, hiển thị và lưu hình ảnh bằng node.js và express [đóng]

Tôi cần tải lên và hiển thị hình ảnh, cũng như lưu nó để không bị mất khi làm mới localhost. Điều này cần được thực hiện bằng cách sử dụng nút "Tải lên", nút này sẽ nhắc chọn tệp.

Tôi đang sử dụng node.js và express cho mã phía máy chủ.

Trước hết, bạn nên tạo một biểu mẫu HTML có chứa phần tử đầu vào tệp . Bạn cũng cần đặt thuộc tính enctype của biểu mẫu thành nhiều phần / biểu mẫu-dữ liệu :

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

Giả sử biểu mẫu được định nghĩa trong index.html được lưu trữ trong một thư mục có tên công khai có liên quan đến nơi đặt tập lệnh của bạn, bạn có thể phân phát biểu mẫu theo cách này:

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(PORT, () => {
  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")));

Sau khi hoàn tất, người dùng sẽ có thể tải tệp lên máy chủ của bạn thông qua biểu mẫu đó. Nhưng để tập hợp lại tệp đã tải lên trong ứng dụng của bạn, bạn sẽ cần phải phân tích cú pháp nội dung yêu cầu (dưới dạng dữ liệu biểu mẫu nhiều phần).

Trong Express 3.x, bạn có thể sử dụng express.bodyParserphần mềm trung gian để xử lý các biểu mẫu nhiều phần nhưng kể từ Express 4.x , không có trình phân tích cú pháp nội dung nào đi kèm với khung. May mắn thay, bạn có thể chọn từ một trong nhiều trình phân tích cú pháp dữ liệu đa phần / biểu mẫu có sẵn trên mạng . Ở đây, tôi sẽ sử dụng multer :

Bạn cần xác định một lộ trình để xử lý các bài đăng trên biểu mẫu:

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!");
      });
    }
  }
);

Trong ví dụ trên, các tệp .png được đăng lên / tải lên sẽ được lưu vào thư mục tải lên liên quan đến vị trí của tập lệnh.

Để hiển thị hình ảnh đã tải lên, giả sử bạn đã có trang HTML chứa phần tử img :

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

bạn có thể xác định một tuyến đường khác trong ứng dụng express của mình và sử dụng res.sendFileđể phân phát hình ảnh được lưu trữ:

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