如何使用 MERN 将上传的文件与其他字段一起保存？答案

【问题标题】：How do I save uploaded file with other fileds using MERN?如何使用 MERN 将上传的文件与其他字段一起保存？
【发布时间】：2020-10-06 17:03:59
【问题描述】：

我正在尝试使用“标题”、“描述”等其他字段保存上传的文件。我可以使用邮递员保存数据，但我无法使用 Redux 从 Reacjs 表单中保存数据。

这是我的后端接收数据的方式：

const department = req.body.department;
const title = req.body.title;
const description = req.body.description;
const file = req.files.file;

我可以从邮递员那里保存但不能反应形式。

这是我的反应形式：

<form onSubmit={(e) => onSubmit(e)} encType='multipart/form-data'> ... some fields ... </form/

这是我的反应状态和提交表单数据：

  const [file, setFile] = useState('');
  const [filename, setFilename] = useState('Choose file...');
  const [bodyData, setBodyData] = useState({
    title: '',
    department: '',
  });

  const { title, department } = bodyData;

  const onChange = (e) =>
    setBodyData({ ...bodyData, [e.target.name]: e.target.value });

这是我的 Redux

   // Create document file for specific patient
export const addFile = (form, id) => async (dispatch) => {
  console.log(form.bodyData);
  try {
    const config = {
      headers: { 'Content-Type': 'application/json' },
    };

    const res = await axios.put(
      `/api/document/file/${id}`,
      (form.bodyData, form.formData),
      config
    );

    dispatch({
      type: ADD_DOCUMENT_FILE,
      payload: res.data,
    });

    dispatch(setAlert('Successfully Uploaded Patient Document', 'success'));
  } catch (err) {
    const errors = err.response.data.errors;
    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: DOCUMENT_FILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};
  const onChangeFile = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    const collect = { formData, bodyData };

    addFile(collect, match.params.id);
  };

【问题讨论】：

如果你包含了你的onSubmit 函数可能会有用
如果你能帮助我，我正在寻求帮助。

标签： node.js reactjs mongodb redux mern

【解决方案1】：

您似乎对如何处理此表单提交有些困惑。

在您的 onSubmit 函数中，您引用了一个未在该范围内定义的变量 file，您还返回 formData, bodyData 但未定义 bodyData，并且 formData 和 bodyData 是相同的同义词数据，所以我不知道你为什么需要两者。

考虑这个问题以获得示例解决方案：How to post a file from a form with Axios

【讨论】：

【解决方案2】：

是的。终于想通了。

我将提交更改为以下代码：

 const onSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('title', title);
formData.append('department', department);
formData.append('file', file);

addFile(formData, match.params.id);

};

还有我改成这段代码的Redux：

    export const addFile = (formData, id) => async (dispatch) => {
  // console.log(form.bodyData);
  try {
    const config = {
      // headers: { 'Content-Type': 'multipart/form-data' },
      headers: { 'Content-Type': 'application/json' },
    };

    const res = await axios.put(
      `/api/document/file/${id}`,
      // { title: form.bodyData.title, department: form.bodyData.department },
      formData,
      config
    );

    dispatch({
      type: ADD_DOCUMENT_FILE,
      payload: res.data,
    });

    dispatch(setAlert('Successfully Uploaded Patient Document', 'success'));
  } catch (err) {
    const errors = err.response.data.errors;
    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: DOCUMENT_FILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

【讨论】：