node.js - 我如何使用 multer 进行反应?
问题描述
我正在使用 Node.js 和 React 构建一个 Web 应用程序,并且我正在尝试在我的后端存储一些文件。出于某种原因,我无法访问我的 req.path ,尽管我配置了所有 multer 策略。
const multer = require('multer')
const config = require('config')
const auth = require('../../middleware/auth')
const {check , validationResult } = require('express-validator');
const storage = multer.diskStorage({
destination: function(req, file , cb){
cb(null,'uploads/')
},
filename: function(req, file, cb){
cb(null, req.user.id)
}
});
const fileFilter = (req, file , cb) =>{
if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png')
cb(null,false);
else
cb(null,true);
}
我的路线:
router.post('/' , [auth,upload.single('image'),
[
check('status','Status is required').not().isEmpty(),
check('skills','Skills is required').not().isEmpty(),
check('gender','Gender is required').not().isEmpty()
]],
async (req,res) => {// cant access to req.file.....}
和我的反应形式:
<div className="form-group">
<input type="text" placeholder="Choose profile image" name="profileImage" value={image}/>
<input type="file" placeholder="Upload" enctype="multipart/form-data" name="image" onChange={(e) => onChange(e)}/>
<small className="form-text">The image must not be bigger then 5MB and only JPG\JPEG\PNG types</small>
</div>
请问,我做错了什么?
解决方案
我在我的后端应用程序中使用了 multer,这就是我配置它的方式,它可以正常工作并将所需的文件存储在服务器文件目录中。
一、安装multer
npm i multer --save
其次,在所需 .js 文件的顶部对其进行初始化
const multer = require("multer");
现在,配置存储(存储位置和文件名)
const storage = multer.diskStorage({
destination: "./public/uploads/postimages/",
filename: function (req, file, cb) {
cb(
null,
file.fieldname + "-" + Date.now() + path.extname(file.originalname)
);
},
});
初始化multer函数,(配置自己的文件大小)
如果要一次上传多个文件,请使用数组,10是文件数,您可以根据需要进行修改。
const upload = multer({
storage: storage,
limits: { fileSize: 10000000000 },
}).array("image", 10);
// 使用 .single("image"); 如果要上传单个文件。// 图像是从前端与文件一起发送的名称/密钥。
如果您使用的是数组,您可以创建一个存储文件的 api,如下所示。
try {
let imagePath = "abc";
let postId = req.params.postId;
let imagesLinks = [];
await upload(req, res, (err) => {
if (err) {
console.log(err);
} else {
if (req.files == undefined) {
console.log("File not found.");
} else {
//image uploaded successfully
req.files.map(function (file) {
imagePath = "uploads/postimages/" + file.filename;
imagesLinks.push(tmp);
});
}
}
res.status(201).send(imagesLinks);
});
}
对于单个文件,看起来就这么简单
try {
let imagePath = "abc";
upload(req, res, (err) => {
if (err) {
res.status(300).send(err);
console.log(err);
} else {
if (req.file == undefined) {
res.status(301).send("image upload failed.");
} else {
//image uploaded successfully
imagePath = "uploads/" + req.file.filename;
storeImageLink(res, imagePath);
}
}
});
}
推荐阅读
- php - 允许用户在不使用 3rd 方插件的情况下在 textarea 中添加 HTML
- c# - 在服务结构的不同端口上运行的多个红隼无状态服务实例
- reactjs - 每次我在类中的某处设置状态时都会触发 componentDidMount 吗?
- javascript - 如何在 WebGL 中对球体进行纹理映射
- javafx - 添加 XYChart.Series
进入 javafx 的折线图 - ember.js - Ember Octane 如何转换自定义 mixin
- r - 为什么我不断收到未使用的参数错误?
- ubuntu-18.04 - certbort 命令返回 ModuleNotFoundError: No module named '_cffi_backend'
- numpy - 用 jax 计算逐行(或逐轴)点积的最佳方法是什么?
- r - 对相关组内的观察结果进行排名