首先从react上面导入 react和useState
import React, { useState } from "react";
安装并且导入axios
import axios from "axios";
这一段中export default是导出的意思 后面是创建一个函数return前面写条件声明变量等..return的后面也就是括号内写html结构
export default function a() { return ( <div> </div> );}
1. export default function a() { 2. return ( 3. <div> 4. </div> 5. ); 6. }
下面是html部分
input的file是上传控件
1. <div> 2. <div> 3. <form onSubmit={handleUpload}> 4. <input type="file" onChange={handleFileChange} /> 5. <button type="submit">上传</button> 6. </form> 7. </div> 8. </div>
用const声明一个变量，举个const [a,seta] = useState(),这个时候我们牵扯到一个知识点
下方属于理解扩展可以略过看看不多
useState他是react的一个hook他可以是字符串，数组或者任意类型，也可以通过这来设置true或者false，来控制dom元素的显示隐藏
那么什么是hook呢？
他可以让我们使用state，让我们可以使用部分声明周期函数
state他就是用于组件的保存控制与修改状态
回归正题
当触发 const时也就是点击上传文件的时候传一个event，也就是说selectedFile他就是一个用于存储我们上传的图片的状态
1. const handleFileChange = (event) => { 2. setSelectedFile(event.target.files[0]); 3. };
1. const handleUpload = (event) => { 2. event.preventDefault(); 3. const formData = new FormData(); 4. formData.append("file", selectedFile); 5. axios.post("//图片上传接口", formData).then((res) => { 6. console.log(res.data); 7. }); 8. };
完整代码cv走就能用
1. import React, { useState } from "react"; 2. import axios from "axios"; 3. 4. export default function Lianxi() { 5. const [selectedFile, setSelectedFile] = useState(null); 6. const handleFileChange = (event) => { 7. setSelectedFile(event.target.files[0]); 8. }; 9. const handleUpload = (event) => { 10. event.preventDefault(); 11. const formData = new FormData(); 12. formData.append("file", selectedFile); 13. axios.post("//放图片上传接口", formData).then((res) => { 14. console.log(res.data); 15. }); 16. }; 17. return ( 18. <div> 19. <div> 20. <form onSubmit={handleUpload}> 21. <input type="file" onChange={handleFileChange} /> 22. <button type="submit">上传</button> 23. </form> 24. </div> 25. </div> 26. ); 27. }
