Node.js 如何在不刷新的情况下使用 Jimp 调整上传图片的大小

Question

我正在尝试使用 Jimp 调整文件服务器端的大小，然后使用以下控制器在 node.js 中上传到 Cloudinary：

exports.uploadImage = async (req, res) => {
  if (!req.files) {
    return res.status(400).json({ msg: 'No file to upload' });
  }
  const file = req.files.file;
  const extension = file.mimetype.split('/')[1];
  const filePath = `../client/public/images/${Date.now()}.${extension}`;
  const photo = await jimp.read(file.tempFilePath);
  await photo.resize(600, jimp.AUTO);
  await photo.write(filePath);
  cloudinary.uploader.upload(filePath, function(err, result) { 
    if (err) {
      console.log('error', err);
    }
    res.json({ fileName: result.public_id });
  });
};

这会调整图像大小并上传，但随后页面会刷新，这是我无法做到的。如果我注释掉 await photo.write(filePath) 页面不会刷新，但上传的文件当然不会调整大小。

前端是 React，看起来像这样：

import React from 'react';
import axios from 'axios';

  handleChange = async (event) => {
    const formData = new FormData(); 

    formData.append('file', event.target.files[0]);

    const res = await axios.post('http://localhost:8000/api/uploadImage', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });

    this.imageRef.current.setAttribute('data-path', `${res.data.fileName}`);
  }

  render() {
    return (
      <form onSubmit={this.formSubmit}>
        <div>
          <label htmlFor='file-input'>
            <img />
          </label>
          <input name="image" id='file-input' type="file" accept="image/png, image/jpeg" data-path="" ref={this.imageRef} onChange={this.handleChange} />
        </div>
      </form>
    );
  }
}

export default AddItemForm;

我在 handleChange 上尝试了 preventDefault 和 stopPropogation，但页面仍然刷新。为什么 photo.write 会导致页面刷新，我该如何防止它？

Answer 1

我通过将文件写入临时目录而不是静态文件夹解决了这个问题。页面重新加载由 react-dev-utils/webpackHotDevClient.js:

触发

case 'content-changed':
  // Triggered when a file from `contentBase` changed.
  window.location.reload();
  break;

当我将文件写入 ../client/public/images/${Date.now()}.${extension} 时触发。

我确认在使用上面的原始代码的生产版本中不存在该问题，但将其更改为以下内容，这样它就不会在开发过程中干扰我：

exports.uploadImage = async (req, res) => {
  if (!req.files) {
    return res.status(400).json({ msg: 'No file to upload' });
  }
  let file = req.files.file;
  const filePath = file.tempFilePath;
  const extension = file.mimetype.split('/')[1];
  file = await jimp.read(file.tempFilePath);
  await file.resize(370, jimp.AUTO).quality(75);
  await file.writeAsync(`${filePath}.${extension}`);
  cloudinary.uploader.upload(`${filePath}.${extension}`, function(err, result) { 
    if (err) {
      console.log('error', err);
    }
    res.json({ fileName: result.public_id });
  });
};

Node.js 如何在不刷新的情况下使用 Jimp 调整上传图片的大小

How to Use Jimp to Resize Image for Upload without Refreshing in Node.js

javascript

node.js

jimp