1，准备后端接口

这里用的是鄙人自己写的一个npm包。

npm安装：

npm i tiny_file_server -g

启动：

tiny_file_server -p 9123 -f D:/abc

-p是端口号。默认是8081
-f是存放路径。默认是执行路径。

效果：

在这里插入图片描述

对应文件夹下出现新文件：

在这里插入图片描述

2，准备一个React环境

React脚手架就行，比如我这个：

https://gitcode.net/qq_37284843/react.git

3，分析思路

封装的部分就这几个：

一个表单，里面一个选择按钮，一个上传按钮。
表单action需要传入。
选择框的name也需要传入。

选择框的change事件触发提交。
提交之后可以有回调获取返回值数据。

action属性
name属性
fallback属性

在这里插入图片描述

4，实现过程

a）父中的使用

简单地传递三个数据。

import Upload from "../Upload";
export default function HelloWorld(props) {
	let say = function (res) {
		res.text().then(console.log)
	}
	return (
		<Upload action="http://localhost:9123/upload" name="file" fallback={say}/>
	)
}

b）上传组件

一鼓作气。

import {useRef} from "react";
export default function HelloWorld(props) {
	let form = useRef();
	let send = e => {
		let formData = new FormData(form.current);
		fetch(props.action, {
			method: "POST",
			body: formData
		}).then(res => {
			props.fallback(res)
		});
	}
	return (
		<form ref={form}>
			<input type="file" name={props.name} onChange={send}/>
		</form>
	)
}

action成了fetch的URL。
name成了input框的属性。

input的change触发send方法，发送请求。

请求回调中调用fallback。

效果：

在这里插入图片描述

c）一些美化

用Label包裹，然后隐藏掉。

<form ref={form}>
	<label className={style.upload}>
		点击上传<input type="file" name={props.name} onChange={send}/>
	</label>
</form>

加点样式：

.upload input{
	display: none;
}
.upload{
	font-size: 2rem;
	background-color: #1E9FFF;
	color:white;
	padding: .6rem 1rem;
	transition: opacity .3s;
}
.upload:hover{
	opacity: 0.7;
	cursor: pointer;
}

效果：

在这里插入图片描述

5，全部代码

父：

import Upload from "../Upload";
export default function HelloWorld(props) {
	let say = function (res) {
		res.text().then(console.log)
	}
	return (
		<Upload action="http://localhost:9123/upload" name="file" fallback={say}/>
	)
}

子：

import {useRef} from "react";
import style from "./index.module.css";
export default function HelloWorld(props) {
	let form = useRef();
	let send = e => {
		let formData = new FormData(form.current);
		fetch(props.action, {
			method: "POST",
			body: formData
		}).then(res => {
			props.fallback(res)
		});
	}
	return (
		<form ref={form}>
			<label className={style.upload}>
				点击上传<input type="file" name={props.name} onChange={send}/>
			</label>
		</form>
	)
}

样式：

.upload input{
	display: none;
}
.upload{
	font-size: 2rem;
	background-color: #1E9FFF;
	color:white;
	padding: .6rem 1rem;
	transition: opacity .3s;
}
.upload:hover{
	opacity: 0.7;
	cursor: pointer;
}