在react js中上传图片时不会触发onChange

在React.js中上传图片时不会触发onChange的原因是，对于文件上传的input标签，onChange事件只会在选择文件后发生改变时触发。而对于文件上传的input标签，由于安全性的考虑，浏览器不允许通过JavaScript直接设置文件路径，因此无法通过onChange事件来获取文件路径。

解决这个问题的常见方法是使用第三方库或自定义组件来实现文件上传功能。以下是一种常见的解决方案：

使用第三方库：可以使用诸如react-dropzone、react-file-upload等第三方库来处理文件上传。这些库提供了更多的功能和灵活性，可以自定义上传按钮、拖放功能等。你可以在官方文档中找到更多关于这些库的详细信息。
自定义组件：你也可以自己编写一个文件上传组件来处理文件上传。以下是一个简单的示例：

import React, { useState } from 'react';

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = () => {
    // 在这里执行上传操作，可以使用fetch或axios等库发送请求
    // 你可以将selectedFile作为请求的一部分或使用FormData对象来上传文件
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
};

export default FileUpload;

在上面的示例中，我们使用useState钩子来跟踪选择的文件。当用户选择文件时，handleFileChange函数会更新selectedFile的状态。然后，用户可以点击“上传”按钮来执行上传操作，你可以在handleUpload函数中实现具体的上传逻辑。

这只是一个简单的示例，你可以根据自己的需求进行扩展和修改。同时，你可以根据腾讯云提供的相关产品和文档来选择适合的云存储服务来存储上传的文件，例如腾讯云对象存储（COS）等。