如何解决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 举报,一经查实,本站将立刻删除。