node.js - 我正在尝试将多个图像上传到 multer diskstorage,但我似乎已经尝试了一切,但我仍然得到了意想不到的领域
问题描述
反应组件
export default function FilesUploadComponent() {
const [state, setState] = useState({
images: null,
});
const [show, setShow] = useState(false);
const [message, setMessage] = useState({
type: "",
header: "",
text: "",
});
function onSubmit(e) {
e.preventDefault();
const formData = new FormData();
let prop = jsCookie.get("id");
formData.append("images", state.images);
axios
.patch("http://localhost:5000/uploads/prop/" + prop, formData)
.then(function (response) {
//handle success
setMessage({
type: "alert alert-success",
header: "Success",
text: "Image uploaded successfully",
});
setShow(true);
window.location = "/tprofile";
})
.catch(function (response) {
//handle error
setMessage({
type: "alert alert-danger",
header: "Failed",
text: "An error occured, please try again",
});
setShow(true);
});
console.log(formData.getAll("images"));
}
function handleSkip() {
jsCookie.remove("id");
setMessage({
type: "alert alert-warning",
header: "Warning",
text: "You skipped uploading images",
});
setShow(true);
window.location = "/tprofile";
}
return (
<div className={styles.container}>
<div className="row mt-4">
<form onSubmit={onSubmit} encType="multipart-form-data">
<div className="form-group">
<input
type="file"
onChange={(e) => {
const arr = [];
for (var i = 0; i < arr.length; i++) {
arr.push(e.target.files[i]);
}
setState({ images: e.target.files});
}}
className="form-control-files"
name="images"
multiple
/>
<input
type="submit"
value="Upload Pictures"
className="btn btn-block btn-primary"
style={{ marginTop: "2rem" }}
/>
<input
type="button"
value="Skip"
className="btn btn-block btn-light"
style={{ marginTop: "2rem" }}
onClick={handleSkip}
/>
</div>
</form>
<Row>
<Col xs={12}>
<Toast
onClose={() => setShow(false)}
show={show}
style={{
display: "block",
marginLeft: "auto",
marginRight: "auto",
}}
delay={3000}
autohide
>
<div className={message.type}>
<strong className="mr-auto">{message.header}</strong>
<br></br>
<small>{message.text}</small>
</div>
</Toast>
</Col>
</Row>
</div>
</div>
);
}
节点js代码
let express = require("express"),
router = express.Router(),
fs = require("fs"),
path = require("path");
var multer = require("multer");
const DIR = "../public/properties";
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, DIR);
},
filename: (req, file, cb) => {
cb(null, file.fieldname + path.extname(file.originalname));
},
});
var upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (
file.mimetype == "image/png" ||
file.mimetype == "image/jpg" ||
file.mimetype == "image/jpeg"
) {
cb(null, true);
} else {
cb(null, false);
return cb(new Error("Only .png, .jpg and .jpeg format allowed!"));
}
},
});
const Property = require("../models/property.model");
router.patch("/prop/:id", upload.array("images", 6), (req, res) => {
const id = req.params.id;
const url = req.protocol + "://" + req.get("host") + "/";
if (!req.files) {
console.log("You have an error");
} else {
let arr = [];
for (var i = 0; i < req.files.length; i++) {
arr.push(url + "public/properties/" + req.files[i].filename);
}
console.log(req.files);
Property.findOneAndUpdate(
{ _id: id },
{ images: arr, imgPath: arr[0] },
(err, result) => {
if (err) {
res.status(400).send(err);
} else {
res.status(204).send(result);
console.log(arr);
}
}
);
}
});
module.exports = router;
这是我不断收到的错误:
MulterError: Unexpected field
at wrappedFileFilter (C:\Users\user\Desktop\Pal Estate\backend\node_modules\multer\index.js:40:19)
at Busboy.<anonymous> (C:\Users\user\Desktop\Pal Estate\backend\node_modules\multer\lib\make-middleware.js:114:7)
at Busboy.emit (events.js:315:20)
at Busboy.emit (C:\Users\user\Desktop\Pal Estate\backend\node_modules\busboy\lib\main.js:38:33)
at PartStream.<anonymous> (C:\Users\user\Desktop\Pal Estate\backend\node_modules\busboy\lib\types\multipart.js:213:13)
at PartStream.emit (events.js:315:20)
at HeaderParser.<anonymous> (C:\Users\user\Desktop\Pal Estate\backend\node_modules\dicer\lib\Dicer.js:51:16)
at HeaderParser.emit (events.js:315:20)
at HeaderParser._finish (C:\Users\user\Desktop\Pal Estate\backend\node_modules\dicer\lib\HeaderParser.js:68:8)
at SBMH.<anonymous> (C:\Users\user\Desktop\Pal Estate\backend\node_modules\dicer\lib\HeaderParser.js:40:12)
at SBMH.emit (events.js:315:20)
at SBMH._sbmh_feed (C:\Users\user\Desktop\Pal Estate\backend\node_modules\streamsearch\lib\sbmh.js:159:14)
at SBMH.push (C:\Users\user\Desktop\Pal Estate\backend\node_modules\streamsearch\lib\sbmh.js:56:14)
at HeaderParser.push (C:\Users\user\Desktop\Pal Estate\backend\node_modules\dicer\lib\HeaderParser.js:46:19)
at Dicer._oninfo (C:\Users\user\Desktop\Pal Estate\backend\node_modules\dicer\lib\Dicer.js:197:25)
at SBMH.<anonymous> (C:\Users\user\Desktop\Pal Estate\backend\node_modules\dicer\lib\Dicer.js:127:10)
我希望能够更新房地产的图像路径,以便我稍后将它们呈现给用户,正如您从反应代码中看到的那样,用户可以在他/她上传属性详细信息后跳过上传图像。
我想知道这里出了什么问题,因为我已经使用用户的个人资料图像完成了此操作,并且效果很好。
解决方案
推荐阅读
- javascript - 无法将值从 C# 传递到 amcharts JavaScript 函数
- svelte - Svelte 热重载问题
- javascript - 用于匹配字符串开头和结尾的两个单引号的正则表达式
- sql - 定期从另一个数据库中的多个表更新一个数据库中的表
- arduino - 我们如何读取电源是否存在于电线中或不存在于 ardunio uno 中?
- ios - CSS 动画在 iPhone/iOS12.2 上不起作用
- javascript - data-image-src(Parallax.js)无法正常工作
- jmeter-5.0 - 标题:运行 jmeter.bat 时 JMeter 出错
- django - 如何在 django 模型中处理 auto_now_add 和 auto_now
- android - 打开 facebook 特定的帖子表单 android 应用程序