如何在cloudinary上直接上传图像而不将其存储到本地目录中



我是ExpressJs的新手,正在为reactjs中创建的一个仪表板创建api。仪表板中有一个表格,它从用户那里收集一些信息;标题"描述";以及";图像";。我创建了一个express服务器来收集这些信息并将其保存到mongodb中。对于图像,我所做的是,我将图像上传到Cloudinary,并将上传的url和public_id存储到数据库中。

因此,在遵循了一些教程之后,我做了这样的事情。

index.js

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const db = require("./db");
// Api router import goes here
const sectionTypesRouter = require("./routes/section-types-router");
const app = express();
const apiPort = 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use(bodyParser.json());
db.on("error", console.error.bind(console, "MongoDB connection error:"));
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.use("/api", sectionTypesRouter);
app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`));

然后,首先我创建了一个文件multer.js:

const multer = require("multer");
const storage = multer.diskStorage({
destination: "public/uploads",
filename: (req, file, cb) => {
cb(null, file.fieldname + "-" + Date.now());
},
});
const fileFilter = (req, file, cb) => {
if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
cb(null, true);
} else {
//reject file
cb({ message: "Unsupported file format" }, false);
}
};
const upload = multer({
storage: storage,
fileFilter: fileFilter,
});
module.exports = upload;

下面是我的api路由器节类型router.js:

const express = require("express");
const upload = require("../utils/multer");
const SectionTypesCtrl = require("../controllers/section-types-ctrl");
const router = express.Router();
router.post(
"/section-type",
upload.single("image"),
SectionTypesCtrl.createSectionType
);
router.get("/section-types", SectionTypesCtrl.getSectionTypes);
module.exports = router;

这是节类型ctrl.js

const SectionType = require("../models/section-type-model");
const fs = require("fs");
const path = require("path");
const cloudinaryUploader = require("../utils/cloudinaryUploader");
const createSectionType = async (req, res) => {
const body = req.body;
if (!body) {
return res.status(400).json({
success: false,
error: "Required parameter are missing",
});
}
cloudinaryUploader
.uploads(req.file.path, "Section-Types")
.then((result) => {
const sectionType = new SectionType({
title: body.title,
description: body.description,
image: {
url: result.url,
publicId: result.public_id,
},
});
sectionType
.save()
.then(() => {
return res.status(201).json({
success: true,
id: sectionType._id,
message: "Section type created!",
});
})
.catch((error) => {
return res.status(400).json({
error,
message: "Section type not created!",
});
});
})
.catch((error) => {
res.status(500).send({
message: "failure",
error,
});
});
};
module.exports = {
createSectionType,
};

最后是cloudinaryUpload.js:

const cloudinary = require("../config/cloudinary");
exports.uploads = (file, folder) => {
return new Promise((resolve) => {
cloudinary.uploader.upload(
file,
{
resource_type: "auto",
folder: folder,
},
(err, result) => {
if (!err) {
resolve({
url: result.url,
public_id: result.public_id,
});
} else {
throw err;
}
}
);
}).catch((error) => {
throw error;
});
};

现在,一切正常。图片上传到cloudinary,返回的url和public_id存储在数据库中。但问题是,我上传的图像也上传到了本地目录public/uploads/上。这可能会在托管站点时造成存储问题。那么,有没有什么最好的方法可以直接将图像上传到cloudinary,而无需在本地目录中创建副本,这也应该在生产模式下工作?

在您的示例中,文件被存储到服务器上的public/uploads,因为您通过multer.diskStorage告诉multer这样做

正如@Molda在上面的评论所说,您可以通过使用multer-storage-cloudinary包让Multer自动将文件存储在Cloudinary中来避免这种情况。

另一种可能性是更改Multer的使用方式,使其不会将文件存储在任何地方,然后在上传的文件位于内存中时将其作为流传递给Cloudinary的SDK。

Cloudinary网站上的这篇博客文章中有一个例子:https://cloudinary.com/blog/node_js_file_upload_to_a_local_server_or_to_the_cloud

在您的情况下,您可以停止使用multer.diskStorage,而只使用multer(),然后使用streamifier或其他库将上传的文件转换为流,并将其传递给cloudinary.uploader.upload_stream()

最新更新