如何解决 axios 将 jpeg 而不是 jpg 发送到后端的问题？

如何解决 axios 将 jpeg 而不是 jpg 发送到后端的问题？

所以我正在尝试将图像从反应前端发送到 node.js 后端，但是当我将 .jpg 发送到后端时，我问它是什么 tpye 说它是 jpeg，而 multer 仍然认为它一个 jpg 所以我在它上面做的尖锐的功能不再工作并给出错误，因为他们不到文件。

我尝试在我需要文件类型的两个实例中使用（multer 保存它的地方和我声明 sharp 的输入的地方）但是那没有用。这是前端的代码：

function App() {
  ct [image, setImage] = useState();
  function handleImage(e) {
    cole.log(files);
    setImage(files[0]);
  }
  function handleApi() {
    ct formData = new FormData();
    formData.append(image, image);
    formData.append(pfp, yes);
    formData.append(filetype,  )
    cole.log(	hello	)
    cole.log(image)
    cole.log(formData)
    axios
      .post(http://localhost:001/users/editprofile/1, formData, {
        headers: {
          Content-Type: multipart/form-data,
        },
      })
      .then((res) => {
        cole.log(res);
      });
  }
  return (
    <div>
      <input type=file name=file onChange={handleImage} />
      <button onClick={handleApi}>submit</button>
    </div>
  );
}`

这是后端代码：

ct storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, images/temp);
  },
  filename: function (req, file, cb) {
    ct id = req.params.id;
    let extention = ();
    cb(null, `pfp_${id}` + extention);
  },
});

router.post(/editprofile/:id, upload.single(image), async (req, res) => {
  ct id = req.params.id;
  ct { pfp, bio, filetype } = req.body;
  cole.log(bio);
  cole.log(req.body);
  if (pfp) {
    ct typetemp = filetype.split(/);
    ct type = typetemp[typetemp.length - 1];

    var imput = path.join(
      __dirname,
      ..,
      images/temp,
      pfp_ + id + . + type
    );
    var output = path.join(__dirname, .., images/temp, id + png.png);
    var newimage = path.join(
      __dirname,
      ..,
      images/profile_pictures,
      pfp_ + id + .png
    );

    try {
      ct metadata = await sharp(imput).metadata();
      if (metadata.format != png) {
        await sharp(imput).toFormat(png, { palette: true }).toFile(output);
      } else {
        await sharp(imput).toFile(output);
      }
      if (metadata.height > metadata.width) {
        var topcut = Math.round((metadata.height - metadata.width) / 2);
        await sharp(imput)
          .extract({
            width: metadata.width,
            height: metadata.width,
            left: 0,
            top: topcut,
          })
          .toFile(newimage);
      } else if (metadata.height < metadata.width) {
        var leftcut = Math.round((metadata.width - metadata.height) / 2);
        cole.log(leftcut);
        await sharp(imput)
          .extract({
            width: metadata.height,
            height: metadata.height,
            left: leftcut,
            top: 0,
          })
          .toFile(newimage);
      }
      ct metadatanew = await sharp(newimage).metadata();
      cole.log(metadatanew);
      var newpfp = id + .png;
    } catch (error) {
      cole.log(error);
    }
  }

当我尝试上传 jpg 时，控制台出现以下错误：

[Object: null prototype] { pfp: 	yes	, filetype: 	image/jpeg	 }
[Error: Input file is missing: D:\programmeerstuff\javascript\pws\version 0.0.1\server\images\temp\pfp_1.jpeg]

这是我尝试上传的图片：（不要介意上面有什么，这只是我点击选择文件 XD 时看到的第一张图片）

您遇到的问题与您尝试上传的图片的 MIME 类型有关。具体来说，图片的文件扩展名为

.jpg

image/jpeg

jpeg

.jpg

要解决此问题，一种可能的解决方案是避免在后端完全使用 MIME 类型，而是依赖文件扩展名。通过这种方式，您可以确保使用正确的文件类型，并且可以毫无问题地访问图像。

另外重要的是确保在发送图片到客户端时使用正确的MIME类型，以确保它在浏览器中正确显示。