使用axioso上载的文件在multer中显示未定义

Question

我正在尝试上传文件使用react和axios到节点后端使用Multer。

当我将表单用作：

<form  action = '/article/add' method="POST"  className = {adminStyle.add_article_form} enctype="multipart/form-data">
                        <input type='text' className={adminStyle.add_article_input_title} autoComplete = 'off' name='title' placeholder='Title' value = {state.title} onChange={changeHandler}/>
                        <select name='category' value = {state.category} onChange={changeHandler}>
                            {options}
                        </select>
                        <input  type="file" name='thumbnail' className={adminStyle.add_article_input_file} onChange={changeFileHandler}/>
                        <textarea  type = 'text' name='body' className={adminStyle.add_article_textarea}  rows='30' cols='100' value = {state.body} onChange={changeHandler}></textarea>
                        <button type='submit'>Submit</button>
                    </form>

它工作得很好,但当使用axios时,文件是未定义的：

我将axios用作：

const [state,setState] = useState({
        title: '',
        category: 'Choose one',
        body: '',
        thumbnail: ''

    })
const changeFileHandler = (e) => {
        setState({ thumbnail: e.target.files[0] })
    }
const postArticle = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('thumbnail', state.thumbnail)
        axios.post('/article/add', state,config).then(data => console.log(data))
    }

<form  onSubmit={postArticle}  className = {adminStyle.add_article_form} enctype="multipart/form-data">
                        <input type='text' className={adminStyle.add_article_input_title} autoComplete = 'off' name='title' placeholder='Title' value = {state.title} onChange={changeHandler}/>
                        <select name='category' value = {state.category} onChange={changeHandler}>
                            {options}
                        </select>
                        <input  type="file" name='thumbnail' className={adminStyle.add_article_input_file} onChange={changeFileHandler}/>
                        <textarea  type = 'text' name='body' className={adminStyle.add_article_textarea}  rows='30' cols='100' value = {state.body} onChange={changeHandler}></textarea>
                        <button type='submit'>Submit</button>
                    </form>

我后端如下：

const storage = multer.diskStorage({
    destination: path.join(__dirname, '..', '../public/uploads'),
    filename: function(req, file, cb){
      cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
  });
  function checkFileType(file, cb){
    // Allowed extension name
    const filetypes = /jpeg|jpg|png|gif/;
    // Check ext
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    const mimetype = filetypes.test(file.mimetype);
  
    if(mimetype && extname){
      return cb(null,true);
    } else {
      cb('Error: Images Only!');
    }
  }

const upload = multer({
    storage: storage,
    limits:{fileSize: 1000000},
    fileFilter: function(req, file, cb){
      checkFileType(file, cb);
    }
  }).single('thumbnail')

router.post('/add',(req, res)=>{
    upload(req,res, (err) => {
        console.log(req.file)
    })
});

有谁能帮我一下吗？我真的被卡住了。我需要在后端上传图像。

Answer 1

您传递的是state而不是formdata作为请求的正文。您应该更改这一行：

axios.post('/article/add', state,config).then(data => console.log(data))

用这句话：

axios.post('/article/add', formData ,config).then(data => console.log(data))