我正在尝试将多个图像上传到 multer diskstorage,但我似乎已经尝试了所有方法,但仍然得到了意想不到的字段

时间:2021-04-04 19:49:23

标签: node.js reactjs express multer mern

反应组件

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)

我希望能够更新房地产的图像路径,以便我稍后将它们呈现给用户,正如您从反应代码中看到的那样,用户可以在他/她上传属性详细信息后跳过上传图像。

我想知道这里出了什么问题,因为我已经使用用户的个人资料图片完成了这项工作,而且效果非常好。

0 个答案:

没有答案
相关问题