如何解决我正在尝试将多个图像上传到 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.fieldname + path.extname(file.originalname));
},});
var upload = multer({
storage: storage,fileFilter: (req,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)
我希望能够更新房地产的图像路径,以便我稍后将它们呈现给用户,正如您从反应代码中看到的那样,用户可以在他/她上传属性详细信息后跳过上传图像。
我想知道这里出了什么问题,因为我已经使用用户的个人资料图片完成了这项工作,而且效果非常好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。