Reactjs输入上传未返回本地URL

Reactjs是一个用于构建用户界面的JavaScript库。它通过组件化的方式，使得开发者可以将界面拆分成独立的、可复用的部分，从而提高代码的可维护性和可重用性。

对于输入上传未返回本地URL的问题，可以通过以下步骤解决：

创建一个React组件，用于处理文件上传的逻辑。可以使用<input type="file">元素来实现文件选择功能。
在组件中，使用JavaScript的FileReader对象来读取选中的文件。FileReader提供了一些方法，如readAsDataURL，可以将文件读取为DataURL。
在FileReader的onload事件中，可以获取到读取的文件内容。将DataURL保存到组件的状态中。
在组件的渲染函数中，可以使用<img>标签来显示上传的图片。将DataURL作为src属性的值即可。

以下是一个示例代码：

import React, { useState } from 'react';

function FileUpload() {
  const [imageUrl, setImageUrl] = useState('');

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      setImageUrl(e.target.result);
    };

    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {imageUrl && <img src={imageUrl} alt="Uploaded" />}
    </div>
  );
}

export default FileUpload;

这个示例代码中，我们创建了一个名为FileUpload的组件。在组件中，通过useState钩子函数创建了一个状态imageUrl，用于保存上传文件的DataURL。

在handleFileChange函数中，我们使用FileReader读取选中的文件，并在读取完成后将DataURL保存到imageUrl状态中。

在组件的渲染函数中，我们使用<input type="file">元素来实现文件选择功能，并通过onChange事件监听文件选择的变化。当文件选择变化时，调用handleFileChange函数处理文件上传。

最后，我们使用<img>标签来显示上传的图片。当imageUrl有值时，将其作为src属性的值，即可显示上传的图片。

这样，当用户选择文件后，上传的文件将会在页面上显示出来。

腾讯云相关产品推荐：腾讯云对象存储（COS），它是一种高可用、高可靠、强安全的云存储服务，适用于存储海量文件、图片、音视频、备份、容灾等场景。您可以通过以下链接了解更多信息：腾讯云对象存储（COS）。