react.js - React中如何在原生input同时实现文字输入和文件/文件夹上传？

Question

react中使用原生input怎么既可上传文字又可文件+文字？
目前只实现了上传文字
现在想在这个input中增加一个上传文件或者文件夹的功能（当文件或者文件夹上传上去之后改上传的文件有个缩略图显示并且还能发送文字）

react中使用原生input怎么既可上传文字又可文件+文字？
目前只实现了上传文字
现在想在这个input中增加一个上传文件或者文件夹的功能（当文件或者文件夹上传上去之后改上传的文件有个缩略图显示并且还能发送文字）

Answer 1

用两个 input 不就好了嘛？一个 type="file" 上传文件， 一个 type="text 来输入文本内容。
只不过在界面上面通过样式设置展示成类似在同一个输入框的样子。

Answer 2

原生input实现不了，改用div加contenteditable属性吧

Answer 3

在React中，一个原生<input>元素通常只能用于一种类型的输入，要么是文本（type="text"），要么是文件（type="file"）。但是，如果你想要同时支持文本输入和文件上传，你需要使用两个独立的<input>元素，或者使用一些变通的方法。

以下是一个基本的示例，说明如何在一个React组件中同时实现文本输入和文件上传：

import React, { useState } from 'react';

function TextAndFileUpload() {
  const [text, setText] = useState('');
  const [file, setFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState('');

  const handleTextChange = (e) => {
    setText(e.target.value);
  };

  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];
    setFile(selectedFile);

    // 这里假设是图片文件，你可以添加对文件类型的检查
    if (selectedFile && selectedFile.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setPreviewUrl(event.target.result);
      };
      reader.readAsDataURL(selectedFile);
    }
  };

  // 发送文本和文件的逻辑（需要根据实际情况编写）
  const sendTextAndFile = () => {
    // 发送文本和文件到服务器...
    console.log('Text:', text);
    console.log('File:', file);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleTextChange} placeholder="Enter text here" />

      <input type="file" onChange={handleFileChange} />

      {previewUrl && (
        <img src={previewUrl} alt="File preview" style={{ maxWidth: '200px' }} />
      )}

      <button onClick={sendTextAndFile}>Send Text and File</button>
    </div>
  );
}

export default TextAndFileUpload;

这个示例中，我们有两个独立的<input>元素：一个用于文本输入，另一个用于文件上传。当用户选择一个文件时，我们使用FileReader来预览图片（如果是图片文件）。然后，你可以添加一个按钮或类似的东西来触发将文本和文件发送到服务器的逻辑。

注意，对于文件夹上传，HTML的原生<input type="file">元素并不直接支持。要实现文件夹上传，你可能需要使用一些JavaScript库（如Dropzone.js、Plupload等）或第三方服务（如Google Drive的API、Cloudinary等），这些服务通常提供更高级的上传功能和文件夹选择功能。然而，这通常涉及到更复杂的设置和更多的代码。