Javascript Multer req.file返回未定义的

Javascript Multer req.file返回未定义的,javascript,html,node.js,sendgrid,multer,Javascript,Html,Node.js,Sendgrid,Multer,我正在尝试使用multer上传一个文件。所有其他数据都在发布,但当涉及到文件输入时,我变得不明确了。我正在尝试使用sendGrid API向邮件发送附件 Html <form id="form" enctype="multipart/form-data"> <div> <div class="input-field"> <input id="email&quo

我正在尝试使用multer上传一个文件。所有其他数据都在发布,但当涉及到文件输入时,我变得不明确了。我正在尝试使用sendGrid API向邮件发送附件

Html

<form id="form" enctype="multipart/form-data">
  <div>
    <div class="input-field">
      <input id="email" type="email" required />
      <label class="active" for="email">To </label>
    </div>

    <div class="file-field input-field">
      <div class="btn btn-small">
        <span><i class="small material-icons">attach_file</i></span>
        <input type="file" id="fileInput" name="fileInput" />
      </div>
      <div class="file-path-wrapper">
        <input class="file-path" type="text" placeholder="attach a file?">
      </div>
    </div>

    <div class="input-field">
      <input id="subject" type="text" required />
      <label class="active" for="subject">Subject</label>
    </div>

    <div class="input-field hide">
      <input id="content" type="text" />
      <label class="active" for="content"></label>
    </div>
  </div>

  

  <div class="w-md">
    <div id="toolbar"></div>
    <div id="editor"></div>
  </div>

  <div class="mt-2 mb-2 center">
    <button class="btn waves-effect waves-light btn-small" id="btn" type="submit">Submit
      <i class="small material-icons right">send</i>
    </button>
  </div>
</form>



index.js

    const sendMail = () => {
      const email = getIds('email').value;
      const subject = getIds('subject').value;
      const myBtn = getIds('btn');
      const htmlFormat = quill.root.innerHTML;
      const content = (getIds('content').value = htmlFormat);
      const data = {
        email,
        subject,
        content,
      };
      // const formData = new FormData();
      // formData.append('data', data);
    
      console.log(data);
      myBtn.disabled = true;
      axios
        .post('/send', data, {
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then((res) => {
          myBtn.disabled = false;
          form.reset();
          quill.setContents([{ insert: '\n' }]);
          M.toast({ html: 'Email Sent!', classes: '' });
          console.log(res);
        })
        .catch((err) => {
          myBtn.disabled = false;
          M.toast({ html: `Error: ${err.message}` });
          console.log(err);
        });
    };
    
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      sendMail();
    });

我知道这个问题已经被问了很多次了,实际上我不知道我哪里做错了。

尝试以下步骤来解决这个问题

  • 删除请求方法上的头
  • axios.post('/send',data)

  • 取消对表单数据部分的注释
  • 在multer上,中间件必须与数据的名称匹配

  • upload.single('data')//我认为它对其他人有用,而不是“fileInput”

    ,我通过删除用于获取表单的前端代码修复了这个问题:

    index.js

    const sendMail = () => {
      const email = getIds('email').value;
      const subject = getIds('subject').value;
      const myBtn = getIds('btn');
      const htmlFormat = quill.root.innerHTML;
      const content = (getIds('content').value = htmlFormat);
      const data = {
        email,
        subject,
        content,
      };
      // const formData = new FormData();
      // formData.append('data', data);
    
      console.log(data);
      myBtn.disabled = true;
      axios
        .post('/send', data, {
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then((res) => {
          myBtn.disabled = false;
          form.reset();
          quill.setContents([{ insert: '\n' }]);
          M.toast({ html: 'Email Sent!', classes: '' });
          console.log(res);
        })
        .catch((err) => {
          myBtn.disabled = false;
          M.toast({ html: `Error: ${err.message}` });
          console.log(err);
        });
    };
    
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      sendMail();
    });
    
    并让Multer package完成它的工作,通过这样做:请求文件现在可用,并且我还确保在所有输入上都有name属性

    我也删除了这一行


    const filePath=fs.createReadStream(file.path)

    您是否尝试使用PostMan请检查此链接:[无法读取undefined:PostMan的属性'path',这是因为它无法读取文件。应该发送内容类型为:multipart/form data的数据
    const formData = new FormData();
    formData.append('data', data);
    
    const sendMail = () => {
      const email = getIds('email').value;
      const subject = getIds('subject').value;
      const myBtn = getIds('btn');
      const htmlFormat = quill.root.innerHTML;
      const content = (getIds('content').value = htmlFormat);
      const data = {
        email,
        subject,
        content,
      };
      // const formData = new FormData();
      // formData.append('data', data);
    
      console.log(data);
      myBtn.disabled = true;
      axios
        .post('/send', data, {
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then((res) => {
          myBtn.disabled = false;
          form.reset();
          quill.setContents([{ insert: '\n' }]);
          M.toast({ html: 'Email Sent!', classes: '' });
          console.log(res);
        })
        .catch((err) => {
          myBtn.disabled = false;
          M.toast({ html: `Error: ${err.message}` });
          console.log(err);
        });
    };
    
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      sendMail();
    });