React - 从以前的用户上传创建下载中心？

问题描述

我对反应很陌生，但我正在尝试通过 saveState const 保存我已上传（本地）的文档，我将其用于我的另一部分应用。

这些保存和上传的文档应该显示在屏幕上，并且能够以某种方式重新下载。

主要问题：

• 无法将这些上传的内容保存到屏幕上
• 创建一个下载按钮来下载它们

偏好：

• 如果这些上传的文档能够显示在某种动态增长/缩小的框中，只是为了看起来更专业一点，我会很高兴。

谢谢！

代码：

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

class FileHub extends Component {
    state = {
        // Initially,no file is selected
        selectedFile: null
    };
    // On file select (from the pop up)
    onFileChange = event => {
        // Update the state
        this.setState({selectedFile: event.target.files[0]});
    };
    // On file upload (click the upload button)
    onFileUpload = () => {
        // Create an object of formData
        const formData = new FormData();
        // Update the formData object
        formData.append(
            "myFile",this.state.selectedFile,this.state.selectedFile.name
        );
        // Details of the uploaded file
        console.log(this.state.selectedFile);
        // Request made to the backend api
        // Send formData object
        axios.post("api/uploadfile",formData);
    };
    // File content to be displayed after
    // file upload is complete
    fileData = () => {
        if (this.state.selectedFile) {
            return (
                <div>
                    <h2>File Details:</h2>
                    <p>File Name: {this.state.selectedFile.name}</p>
                    <p>File Type: {this.state.selectedFile.type}</p>
                    <p>
                        Last Modified:{" "}
                        {this.state.selectedFile.lastModifiedDate.toDateString()}
                    </p>
                </div>
            );
        } else {
            return (
                <div>
                    <br/>
                    <h4>Choose before Pressing the Upload button</h4>
                </div>
            );
        }
    };
    render() {
        return (
            <div>
                <h1>
                    FileHub
                </h1>
                <div>
                    <input type="file" onChange={this.onFileChange}/>
                    <button onClick={this.onFileUpload}>
                        Upload File
                    </button>
                </div>
                {this.fileData()}
            </div>
        );
    }
}

export default FileHub;

是否最好将上传和下载分成两个独立的类？

这是来自不同文件的保存状态代码，我还没有弄清楚如何正确使用：

代码：

const saveState = state => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state",serializedState);
  } catch {
    // ignore write errors
  }
};

const loadState = () => {
  try {
    const serializedState = localStorage.getItem("state");
    if (serializedState === null) {
      return undefined;
    }
    console.log("Loading JSON",serializedState);
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};

感谢您为我提供的任何帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）