如何在Angular应用中使用Multer和nodejs接收我上传到服务器的图像？

Question

请我对Nodejs的新手，我正在尝试创建一个图像上传器，该图像上传器将使用Nodejs和Multer上传到我的服务器，但问题在于使图像返回我的Angular应用程序。

这是后端代码：

const express = require('express');
const multer = require('multer');
const cors = require('cors');

const app = express();

var corsOptions = {
    origin: "*",
    optionsSuccessStatus: 200,
}

app.use(cors(corsOptions));

app.use(express.static('uploads'));
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "uploads");
    },
    filename: function (req, file, cb) {
        cb(null, `${Date.now()}_${file.originalname}`);
    },
})

const upload = multer({ storage });

app.post('/file', upload.single('file'), (req, res) => {
    const file = req.file;
    if (file) {
        res.json(file);
    } else {
        throw new Error('File upload unsuccessful')
    }
})

const port = 3000;

app.listen(port, () => console.log(`Server running on port ${3000}`));

这是我的app.html代码：

<input type="file" name="image" (change)="upload($event)">

这是我的app.ts代码：

upload(event: any) {
    const file = event.target.files[0];

    const formdata = new FormData();
    formdata.append('file', file)

    this.httpClient.post('http://localhost:3000/file', formdata)
    .subscribe((data) => {
      console.log(data);
      
    },
    (error) => {
      console.log(error)
    })

请帮助我检索图像，以便我可以在Angular App中使用它。谢谢。

Answer 1

您可以通过两种方法来实现这一目标。两种方法都有自己的利弊。

将图像存储在本地，然后将URL发送回浏览器。

if (req.files) {
    const fileNames = [];
    for (let i = 0; i < req.files.length; i++) {
        const file = req.files[i];
        const relPath = "your/img/path";
        const dirName = path.join(BASE_APP_PATH, relPath);
        const relFileName = path.join(
            relPath,
            `${i + 1}_${file.originalname.replace(",", "")}`
        );
        const img_location = `${dirName}/${
            i + 1
        }_${file.originalname}`;
        if (!fs.existsSync(dirName)) fs.mkdirSync(dirName, { recursive: true });
        fs.writeFileSync(img_location, file.buffer, {});
        fileNames.push(relFileName);
    }
}

获取图像并将base64发送回浏览器。

const encoded = req.files[0].buffer.toString('base64')