and图片上传需要将基于类的组件转换为react -hooks，无法增加图片的宽和高

在React中，可以使用类组件或React Hooks来处理图片上传。如果你想将基于类的组件转换为React Hooks，并且无法增加图片的宽和高，可以按照以下步骤进行操作：

首先，将类组件转换为函数组件，并使用useState Hook来管理组件的状态。创建一个新的函数组件，并导入React和useState Hook：

import React, { useState } from 'react';

function ImageUploader() {
  const [image, setImage] = useState(null);

  // 其他代码...
}

在函数组件中，使用<input type="file">元素来实现图片上传。当用户选择图片时，触发onChange事件，并将选中的图片存储在组件的状态中：

function ImageUploader() {
  const [image, setImage] = useState(null);

  const handleImageChange = (event) => {
    const selectedImage = event.target.files[0];
    setImage(selectedImage);
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      {/* 其他代码... */}
    </div>
  );
}

如果你想要获取图片的宽和高，可以使用FileReader对象来读取图片文件，并在加载完成后获取宽高信息。在handleImageChange函数中添加以下代码：

const handleImageChange = (event) => {
  const selectedImage = event.target.files[0];
  
  // 使用FileReader读取图片文件
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      // 获取图片的宽和高
      const width = img.width;
      const height = img.height;
      console.log('宽度:', width);
      console.log('高度:', height);
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(selectedImage);

  setImage(selectedImage);
};