在 MERN 堆栈中上传图像

Question

我想将图像保存到从 React.js 上传的数据库中，但它没有上传。 它在 postman 中运行良好，但在 React.js 中运行不正常。

在数据库中，我只保存文件的路径而不是文件的完整数据 [Array]。

state： let [preview_image, setPreview_Image] = useState("")

文件处理程序 function：

const uploadFileHandler = async (e) => {
    e.preventDefault();
    const file = e.target.files[0];   //The file logs the data about the file
    let formData = new FormData();
    let image = formData.append("preview_image", file);   //Here image logs the undefined in the console.
   // So, basically it is not appending the file-data to the formData
    setUploading(true);

    try {
      const config = {
        url: "http://localhost:8000/v1/template/create",
        method: "POST",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
          "x-access-token": adminInfo.data.JWToken,
        },
      };
      const { data } = await axios(config).catch(console.error);
      setPreview_Image(data);
      setUploading(false);
    } catch (error) {
      console.trace(error);
      setUploading(false);
    }
  };

文件上传者：

<Form.Group controlId="preview_image">
    <Form.Label>Image</Form.Label>
    <Form.Control
      type="text"
      placeholder="Upload Image url"
      value={preview_image}
      onChange={(e) => setPreview_Image(e.target.value)}
    ></Form.Control>
     <Form.Control
      type="file"
      label="Choose file"
      onChange={uploadFileHandler}
     ></Form.Control>
  </Form.Group>

错误：

模板创建者操作：

export const createtemplate = (templateData) => async (dispatch, getState) => {
  try {
    dispatch({ type: TEMPLATE_CREATE_REQUEST });

    const {
      adminLogin: { adminInfo },
    } = getState();

    const config = {
      url: "http://localhost:8000/v1/template/create",
      method: "POST",
      data: templateData,
      headers: {
        "Content-Type": "application/json",
        "x-access-token": adminInfo.data.JWToken,
      },
    };
    const { data } = await axios(config).catch(console.error);

    dispatch({ type: TEMPLATE_CREATE_SUCCESS, payload: data });
  } catch (error) {
    dispatch({
      type: TEMPLATE_CREATE_FAILURE,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

来自 postman 的请求和响应

不知道为什么我会收到错误。

前端：

我调用 createtemplate 操作的 templateScreen：

const submitHandler = (e) => {
    e.preventDefault();
    dispatch(
      createTemplate({
        name: templateName,
        package_ids: selectedPackage,
        html_template: htmlTemplate,
        required_variables: variables,
        preview_image: preview_image,
      })
    );
  };

后端配置

模板创建者服务：

exports.createTemplate = async (req) => {
  // HERE req.files logs undefined after I click on the add template details button and req.body logs all the data.
  const name = req.body.name;
  const package_ids = req.body.package_ids;
  const html_template = req.body.html_template;
  const required_variables = req.body.required_variables;
  const preview_image = req.files.preview_image;

  const imagePath = preview_image.map((image) => image.path);

  const template = new Template({
    name,
    package_ids,
    html_template,
    required_variables,
    preview_image: imagePath.toString(),
  });
  await template.save();
  return template;
};

createTemplate service的controller文件

exports.createTemplate = catchAsync(async (req, res) => {
  try {
    const template = await templateService.createTemplate(req);
    return res.succeed(template, "Template created successfully");
  } catch (error) {
    console.trace(error.toJSON());
    return res.failed(500, "Internal Server Error", error);
  }
});

它基本上做的是当我单击选择文件并单击要上传的文件时，它会调度创建模板操作（这就是我的想法）。 它会在此处记录文件详细信息，并从后端的 controller 文件中返回以下错误：

Answer 1

另一种方法是从客户端将图像转换为 base64 并将 base64 字符串发送到服务器。

将图像文件转换为 base64 的 function 是

 const toBase64 = file => new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); async function submit(){ // Testing the above code const file = document.querySelector('#myfile').files[0]; const base64String = await toBase64(file); const image = document.querySelector("#preview"); image.src = base64String; const detail = document.querySelector("#detail"); detail.innerText = base64String; }

 <input type="file" id="myfile"/> <button onclick="submit(this)"> Submit </button> <div style="margin: 20px 0 20px 20px"> <img id="preview" alt="the pic will come here" width="400" /> </div> <p id="detail" style="width: 500px; word-wrap: break-word;"> </p>

服务器应该处理 rest，将其转换回文件，或者您可以将其作为文本保存在数据库中。

在图像中，如果将 src 放入该字符串，它将起作用。

使用此方法，您始终可以在正文中将数据作为 json 发送。

Answer 2

在 ExpressJS 的早期版本中，可以使用 req.files 作为请求 object 的一部分轻松访问文件。 在最近的版本中，请求 object 不再提供此属性。 现在，您可以使用单独的 package multer 来访问上传的文件。 通过告诉存储所有上传文件的位置来实例化它并将其添加为中间件

const fileUpload = require('../middleware/file-upload');

router.post('/', fileUpload.single('image'), postControllers.createPost);

在提交处理程序中，调用数据时您的表单数据未定义，让 image = formData.append("preview_image", file); 它也应该直接分配formData：formData.append("preview_image", file)

对不起，如果我遇到一个混蛋，新的回答只是练习帮助

Answer 3

当用户选择文件时，将调用uploadFileHandler回调。 它将使用可用的表单数据调用 API。 这是预期的行为吗？

我从您的错误日志中可以看到：

• API 验证表单数据。 name和html_template是必需的。
• 前端不对name和html_template字段进行表单验证

如果您想在用户 select 文件后立即调用 API，请确保您具有上述字段的值。