使用React JS和PHP服务器进行文件上传，预览

Question

我正在尝试在ReactJs中上传文件。我需要实现一个Little File Preview，用户可以在其中看到他即将上传的文件。不幸的是，此预览无法正常工作，因为我没有从文件Array中从用户计算机中获取文件的相对路径。 这是我的文件添加功能代码

onFilesAdded(files) {
    console.log(files);
    this.setState(prevState => ({
      files: prevState.files.concat(files)
    }));   
}

这是我的dropzone渲染器，带有附加文件的想法

   return (
        <Card className="space-above">
            <CardBody>
                <form name="form" onSubmit={this.handleSubmit}>
                   <div className="Upload">
                    <span className="Title">Change Profile Picture</span>
                    <div className="Content">
                      <div>
                        <Dropzone
                          onFilesAdded={this.onFilesAdded}

                        />
                      </div>
                      <div className="Files">
                             <Fragment>
                                {this.state.files.map(file => {
                                  return (
                                    <div key={file.name} className="Row">
                                        <img
                                            alt="Preview"
                                            key={file.name}
                                            src={file.name}
                                            style={previewStyle}
                                          />
                                          {console.log(file)}
                                        <span className="Filename">{file.name}</span>
                                        {this.renderProgress(file)}
                                    </div>
                                  );
                                })}
                            </Fragment>
                        </div>
                    </div>
                </div>

带有预览部分。

第二，当我将此文件提交到PHP服务器时，我无法接收这些文件。由于文件值为空数组，因此未返回任何文件。

这是我整个过程的代码。对此的任何帮助将不胜感激或提供指示。

import React, { Component,Fragment } from 'react';
import {Button, Card, CardBody} from 'mdbreact';
import request from 'superagent';
import Dropzone from "./dropzone/Dropzone";
import { Line } from 'rc-progress';
import Progress from "./progress/Progress";
import { Trans} from '@lingui/macro';
import { apiConstants } from '../_constants';
import { connect } from 'react-redux';

//this component is to upload a file into my server
class Muzikolupload extends Component {

     constructor(props) {
    super(props);
    this.state = {
      files: [],
      uploading: false,
      uploadProgress: {},
      successfullUploaded: false
    };

    this.onFilesAdded = this.onFilesAdded.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

    onFilesAdded(files) {
        console.log(files);
        this.setState(prevState => ({
          files: prevState.files.concat(files)
        }));   
    }

    //Handling Submision
    handleSubmit(event) {
        event.preventDefault();
        const {user} = this.props;
        let authKey = user.auth_key;
        const {files} = this.state;

        if (files.length>0) {
            this.setState({ submitted: true,nofile:false });
            //sent to my server now using
            let req = request.post(apiConstants.API_GENERAL_URL+'changepbackpic?access-token='+authKey);
            req.on('progress', event => {
                let percent = Math.floor(event.percent);
                if (percent >= 100) {
                    this.setState({ percent: 100 });
                } else {
                    this.setState({ percent: percent });
                }
            });
            const that = this;
            req.send(this.state);
            req.end((err, res) => {
                if(err){
                    console.log('error occured during file uploading', err);
                    this.setState({
                        completed:true,
                        message:'Field During Upload',
                        submitted:false,
                        files:[]
                    })
                }
                 if(res){
                     console.log('successfullUploaded', res);
                    this.setState({
                        completed:true,
                        message:'File succesfully uploaded',
                        submitted:false,
                        files:[]
                    })
                }
            });
        }
        else{
            this.setState({ nofile: true, submitted: false });
        }
    }

    renderProgress(file) {
        const uploadProgress = this.state.uploadProgress[file.name];
        if (this.state.uploading || this.state.successfullUploaded) {
          return (
            <div className="ProgressWrapper text-center">
              <Progress progress={uploadProgress ? uploadProgress.percentage : 0} />
              Drag and Drop or open to Change Picture

            </div>
          );
        }
  }

    render() {
        const previewStyle = {
          display: 'inline',
          width: 100,
          height: 100,
        };
        return (
            <Card className="space-above">
                <CardBody>
                    <form name="form" onSubmit={this.handleSubmit}>
                       <div className="Upload">
                        <span className="Title">Change Profile Picture</span>
                        <div className="Content">
                          <div>
                            <Dropzone
                              onFilesAdded={this.onFilesAdded}

                            />
                          </div>
                          <div className="Files">
                                 <Fragment>
                                    {this.state.files.map(file => {
                                      return (
                                        <div key={file.name} className="Row">
                                            <img
                                                alt="Preview"
                                                key={file.name}
                                                src={file.name}
                                                style={previewStyle}
                                              />
                                              {console.log(file)}
                                            <span className="Filename">{file.name}</span>
                                            {this.renderProgress(file)}
                                        </div>
                                      );
                                    })}
                                </Fragment>
                            </div>
                        </div>
                    </div>
                    {this.state.submitted &&
                        <Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' />
                    }
                    {this.state.completed &&
                        <div className="help-block">
                            {this.state.message}
                        </div>
                    }
                    {this.state.nofile &&
                        <div className="help-block">
                           Please Attach a Picture
                        </div>
                    }
                    <div >
                        <Button type="submit" onClick={this.handleSubmit} className=" site-secondary-back btn-block"  ><Trans>Submit</Trans></Button>
                    </div>
                    </form>
                </CardBody>
            </Card>
        );
    }
}

function mapStateToProps(state) {
    const {user} = state.authentication;
    return {
        user,
    };
}

export default connect(
  mapStateToProps,
)(Muzikolupload)