Question

我有一个使用axios上传媒体的React页面。

它可以上传，但是我无法重新加载或更新页面。

在主页的父页面中，我有一个用于上传媒体的组件（MediaUpload）和一个用于显示媒体的组件（MediaPlayer）。

上传成功后，我希望MediaPlayer组件更新并显示新上传的媒体文件名。

现在，当它上传时，我必须刷新浏览器才能看到新文件。

我想让它工作吗？

谢谢！

-父母-

<div> -- Media -- </div>
<div>
</div>
<div>
    <MediaUpload alienId={alien.id} />
</div>
<div>
    <MediaPlayer alienId={alien.id} />
</div>

-MediaUpload-

import React, { Component } from 'react';
import axios from 'axios';

class MediaUpload extends Component {

state = { selectedFile: null }

uploadHandler = (e) => {
    e.preventDefault();

    var bodyFormData = new FormData();

    bodyFormData.append('fileData', this.state.selectedFile);

    axios({
        method: 'post',
        url: `/api/HangingPlanet/alien-files/${this.props.alienId}/files/upload`,
        data: bodyFormData,
        config: { headers: { 'Content-Type': 'multipart/form-data' } }
    })
        .then((response) => {
            //handle success
            console.log(response);
            this.setState({ selectedFile: event.target.files[0] })
        })
        .catch((response) => {
            //handle error
            console.log(response);
        });

}

render() {
    const { alienId } = this.props;

    return (
        <div>
            <div>Upload Media</div>
            <input type="file" name="fileData" multiple />
            <button onClick={this.uploadHandler}>Upload!</button>
        </div>
    );
}
}

export default MediaUpload;

-MediaPlayer-

import React, { Component } from 'react';
import axios from 'axios';
import RenderalienMedia from './RenderalienMedia';

const mediaPath = "/api/HangingPlanet/alien-files/";

class MediaPlayer extends Component {
constructor() {
    super();
    this.state = {
        files: []
    };
}

componentDidMount() {
    axios.get(`/api/HangingPlanet/alien-files/${this.props.alienId}/files`)
        .then((response) => {
            this.setState({ files: response.data })
        })
        .catch((error) => {
            console.log(error);
        });
}

showMedia = (props) => {
    const { alienId } = this.props;
    return (
        <div>
            {
                props.files.length > 0 &&
                    <div>
                    {props.files.map((file) =>
                        <RenderalienMedia
                            mediaPath={mediaPath}
                            alienId={alienId}
                            fileId={file.id}
                            downloadName={file.downloadName}
                            fileTitle={file.title}
                        />
                    )}
                    </div>
            }
        </div>
    );
}

render() {
    const { alienId } = this.props;
    return (
        <div>
            <div>alien Media</div>
            <div>
                {this.showMedia(this.state)}
            </div>
        </div>
    );
}
}

 export default MediaPlayer;

Answer 1

this.setState({ selectedFile: event.target.files[0] })

event.target.files[0]应该是e.target.files[0]

Answer 2

您应该告诉Parent组件在上传完成后重新呈现MediaPlayer。

-父级-

class Parent extends Component {
    state = {
    showMediaPlayer: false,
    loading: false,
  }

  handleOnUpload = () => {
   this.setState({
   showMediaPlayer: false,
   loading: true,
   });
  }

  handleOnUploadEnd = () => {
   this.setState({
   showMediaPlayer: true,
   loading: false,
   });
  }

  render(){
    return (
        <div> -- Media -- </div>
        <div>
        </div>
        <div>
            <MediaUpload
              alienId={alien.id}
              onUpload={this.handleOnUpload}
              onUploadEnd={this.handleOnUploadEnd}
             />
        </div>
        <div>
            {this.state.loading === true && this.state.showMediaPlayer === false  && 'Loading...'}
            {this.state.loading === false && this.state.showMediaPlayer === true  && <MediaPlayer alienId={alien.id} />}
        </div>
      );
    }
}

-媒体上传-

class MediaUpload extends Component {

state = { selectedFile: null }

uploadHandler = (e) => {
    e.preventDefault();

    // call handleOnUpload Function on Parent to create loading component
    this.props.onUpload();

    var bodyFormData = new FormData();

    bodyFormData.append('fileData', this.state.selectedFile);

    axios({
        method: 'post',
        url: `/api/HangingPlanet/alien-files/${this.props.alienId}/files/upload`,
        data: bodyFormData,
        config: { headers: { 'Content-Type': 'multipart/form-data' } }
    })
        .then((response) => {
            //handle success
            console.log(response);
            this.setState({ selectedFile: event.target.files[0] })

            // call handleOnUploadEnd Function on Parent to render media player
            this.props.onUploadEnd();
        })
        .catch((response) => {
            //handle error
            console.log(response);
        });

}

render() {
    const { alienId } = this.props;

    return (
        <div>
            <div>Upload Media</div>
            <input type="file" name="fileData" multiple />
            <button onClick={this.uploadHandler}>Upload!</button>
        </div>
    );
}
}

在axios发布后更新组件

2 个答案: