我试图在我的网站上传图片功能。我一直在上传一个单一的图像,它的工作,我如何改变我的代码,使它在同一时间上传多个图像代码如下:
服务器端:
// img storage confing
var imgconfig = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "./uploads");
},
filename: (req, file, callback) => {
callback(null, `image-${Date.now()}.${file.originalname}`)
}
});
// img filter
const isImage = (req, file, callback) => {
if (file.mimetype.startsWith("image")) {
callback(null, true)
} else {
callback(null, Error("only image is allowd"))
}
}
var upload = multer({
storage: imgconfig,
fileFilter: isImage
})
// register userdata
app.post("/insertImage", upload.single("photo"), (req, res) => {
const { filename } = req.file;
console.log(req.file)
});
客户端:
const [file, setFile] = useState("");
const setimgfile = (e) => {
setFile(e.target.files[0])
}
const addUserData = async (e) => {
e.preventDefault();
var formData = new FormData();
formData.append("photo", file)
const config = {
headers: {
"Content-Type": "multipart/form-data"
}
}
const res = await Axios.post("/insertImage", formData, config);
if (res.data.status == 201) {
console.log("NO error")
} else {
console.log("error")
}
}
ReactJSX
这是我的输入文件,并在此处添加了 *multiple
<div style={{ padding: 15, backgroundColor: '#fff', marginTop: 15 }}>
<h4>Upload file:</h4>
<input type="file" name='photo' onChange={setimgfile} multiple/>
<button onClick={addUserData}>submit</button>
</div>
2条答案
按热度按时间fjaof16o1#
使用循环将所有文件推送到formdata中,并在磁盘中创建接收到的文件。不要忘记使用多个
有关详细信息,请查看此示例https://www.freecodecamp.org/news/formdata-explained/
9rbhqvlz2#
服务器代码
**注:**上传多个图像时,Multer将填充
req.files
,而不是req.file
。客户代码
x一个一个一个一个x一个一个二个x