Question

我们如何在React JS中自定义精细上传器，并使用表单提交文件以及表单上的某些字段，而不是选择文件并上传。

也可以告诉我在React JS中上传文件时如何在标题中传递令牌

谢谢！

Answer 1

根据您正在使用的精细上传器方法，您可以在创建精细上传器的实例时通过customHeaders属性传递自定义标头。这个答案对你有一些潜在的指导，但不知道你需要哪些方法标题意味着我不能更具体：FineUploader - add authentication in header

您的第一个问题更难回答，因为这取决于您尝试使用优质上传器以及发送上传的位置。您可以在普通的HTML文件输入中捕获文件，然后在提交表单时将文件传递给精细上传器，但这就提出了为什么首先要使用精细上传器的问题。

Answer 2

您好选择文件和上传文件，您需要为选择文件上传文件创建两个事件

import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';

const styles = theme => ({
    ChooseButton:{
        background: '#86c5f7',
        margin: 1,
        float: 'left',
        '&:hover': {
          background: '#0078d7'
        },
      },
    FileSelecter:{
        display:'none'
    },
    FileNamer:{
        overflow: 'hidden',
        paddingleft: 10,
        height: '2.5rem',
        width:'67%'
      },
    
});

class FileChoose extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          fileName: '', 
        }
      }

    handleClick=(event)=>{
        this.fileInput.click();
    }

    handleChange = (event) => {
        var name = event.target.value;
        var lastIndex = name.lastIndexOf("\\");
        if (lastIndex >= 0) {
            name = name.substring(lastIndex + 1);
        }
        this.setState({ fileName: name});
    }
    
    uploadHandler = (event) => {
  const formData = new FormData()
  formData.append('myFile', this.state.selectedFile, this.state.selectedFile.name)
  axios.post('my-domain.com/file-upload', formData, {
    onUploadProgress: progressEvent => {
      console.log(progressEvent.loaded / progressEvent.total)
    }
  })
}

    render() {
        const classes = this.props.classes;
        return (
            <div>
                <Button className={classes.ChooseButton} onClick={this.handleClick}>
                    Choose File
                    <input  
                        ref={fileInput => this.fileInput = fileInput} 
                        type='file' 
                        className={classes.FileSelecter} 
                        onChange={this.handleChange}/>
                </Button>
                <TextField  
                    className = {classes.FileNamer}
                    placeholder="No file chosen"
                    value={this.state.fileName}/>
                    
                <Button onClick={this.uploadHandler}>Upload!</Button>
            </div>
        );
    }
}
export default withStyles(styles)(FileChoose);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React Js精细上传器组件

2 个答案: