react图片上传

首先从react上面导入 react和useState

import React, { useState } from "react";

安装并且导入axios

import axios from "axios";

这一段中export default是导出的意思 后面是创建一个函数return前面写条件声明变量等..return的后面也就是括号内写html结构

export default function a() {      return (   

 

  );}

export default function a() {
  return (
    

    
  );
}

下面是html部分

input的file是上传控件

    

      

        

          
          上传
        
      
    

用const声明一个变量，举个const [a,seta] = useState(),这个时候我们牵扯到一个知识点

下方属于理解扩展可以略过看看不多

useState他是react的一个hook他可以是字符串，数组或者任意类型，也可以通过这来设置true或者false，来控制dom元素的显示隐藏

那么什么是hook呢？

他可以让我们使用state，让我们可以使用部分声明周期函数

state他就是用于组件的保存控制与修改状态

回归正题

当触发 const时也就是点击上传文件的时候传一个event，也就是说selectedFile他就是一个用于存储我们上传的图片的状态

 const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append("file", selectedFile);
    axios.post("//图片上传接口", formData).then((res) => {
      console.log(res.data);
    });
  };

完整代码cv走就能用

import React, { useState } from "react";
import axios from "axios";

export default function Lianxi() {
  const [selectedFile, setSelectedFile] = useState(null);
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };
  const handleUpload = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append("file", selectedFile);
    axios.post("//放图片上传接口", formData).then((res) => {
      console.log(res.data);
    });
  };
  return (
    

      

        

          
          上传
        
      
    
  );
}