Question

我正在尝试实现文件上传，但是使用了SUIR <Input>，按钮，标签等。

这完全是关于渲染中元素的使用。

使用常规html <label>和<input>元素，此过程将按预期工作。

  <Form.Field>
    <label>File input & upload for dataschemas & datasources</label>
    <input type="file" onChange={this.fileChange} />
    <Button type="submit">Upload</Button>
  </Form.Field>

现在，我正在尝试使用SUIR <Input>元素以及带有<Button>元素的一些道具来进行样式设计。

  <Form.Field>
    <label>File input & upload </label>
    <Input type="file" onChange={this.fileChange}>
      <Button
        content="Choose File"
        labelPosition="left"
        icon="file"
      />
    </Input>
    <Button type="submit">Upload</Button>
  </Form.Field>

您可以访问codeandbox here，以更好地了解我在说什么。

当我在SUIR实现示例中单击Choose File时，它不会提示用户从其系统中选择文件，而常规的html <input>会提示用户。我不确定如何使<Input type="file ...>的语义表现出相同的方式。

Answer 1

SUIR没有提供开箱即用的FileInput按钮解决方案。但是您可以轻松创建自己的此类按钮实现。例如，通常通过使用hidden文件输入和一个按钮来完成此操作，当用户单击该按钮时，该按钮会触发隐藏的输入单击：

  <Button
    content="Choose File"
    labelPosition="left"
    icon="file"
    onClick={() => this.fileInputRef.current.click()}
  />
  <input
    ref={this.fileInputRef}
    type="file"
    hidden
    onChange={this.fileChange}
  />

this.fileInputRef是React.createRef()方法创建的React ref。您可以使用上述解决方案来检查此codesandbox example。

Answer 2

您可以使用以下方法设置文件上传表单。

并且您还可以获取文件名和文件引用，如本示例所示，如果您使用的是axios堆栈，则我在express, node中包含了前端上传逻辑，在后端代码中包含了后端代码

class Thingy extends React.Component {
  
  uploadFile = event => {
    
    // filename
    console.log('filename ' + event.target.value);
    
    //file 
    console.log('file ' + event.target.files[0]);
    
    // if you are using axios then you can use below code
    //const formData = new FormData();
        // formData.append('file', event.target.files[0])
        // axios.put(
        //     'url',
        //     formData,
        //     { headers: { 'content-type': 'multipart/form-data' } }
        // ).then(data => {
        //     console.log('file uploaded')
        //     console.log(data)
        // }).catch(e => {
        //     console.log('error')
        //     console.log(e)
        // })
        
        // in express , node, backend code would be
        //import formidable from 'formidable'
        //(req, res) => {
        //  let form = new formidable.IncomingForm();
        //  form.parse(req, (err, fields, files) => {
            // you can get the file from files.file.path
        //  })
        // }
  }
  
  render() {
    console.log("rendered");
    return (
      <div>
        <input type="file" id="file" name="filename" onChange={this.uploadFile} />
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 3

这是我的解决方案：

         function mainPage(){
            const [newFile, SetNewFile] = useState([]); 

            const fileChange = (event) => {
                SetNewFile( event.target.files[0] );
             };

            const onFormSubmit = () =>{
              // Do something
            }

            return(
            <Form onSubmit={onFormSubmit}>
                <Form.Field>
                    <Button as="label" htmlFor="file" type="button">
                        Some button stuff
                    </Button>
                    <input type="file" id="file" hidden onChange={fileChange} />

                </Form.Field>
                <Button type="submit">Upload</Button>
            </Form>)
            }

Answer 4

GProst的答案效果很好。在另一种情况下，您可能不想创建ref来实现此文件输入按钮。

以下解决方案使用htmlFor道具并将该id传递给<input>。不使用ref消除了额外的JS，以及按钮和输入之间不必要的通信。

<Button as="label" htmlFor="file" type="button">
  Some button stuff
</Button>
<input type="file" id="file" style={{ display: "hidden" }} onChange={this.onChange} />

React-输入类型文件语义UI React

4 个答案: