input上传图片，以及动态添加表单，img白边

import './App.scss';
import { useState } from 'react';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function App() {
  const [btn,setBtn]=useState([
    {
      name: '',
      page: '',
      lik:'',
      imgUrl:''
    }
  ])

  const addbtn = ()=>{//往btn这个数组里面，添加一个对象，对象里面是表单字段，动态添加了一项表单
    const aa = [...btn]
    aa.push(
      {
        name: '',
        page: '',
        lik:'',
        imgUrl:''
      }
    )
    setBtn(aa)
  }

  const handleImageChange = (e,index) => {//图片上传函数
    let aa = e.target.files[0]
    getBase64(aa, function(res){//图片解码base64
      const a = [...btn]
      a[index].imgUrl = res
      setBtn(a)
    })
  }

  const handleNameChange =(index,e)=>{//属于name的change事件，通过拿到index可以得知你是btn这个数组的第几个对象，也就能修改你点击的表单在数组里对应的对象
    const a = [...btn]
    a[index].name = e.target.value
    setBtn(a)
  }
  const handlePageChange =(e,index)=>{
    const a = [...b]
    a[index].page = e.target.value
    setBtn(a)
  }

  return (
    <div className="App">
      <div className='btn' onClick={addbtn}>
        点击添加一个表单
      </div>
      <div>
        {
          btn.map((item, index) => {
            return (
              <div className='box' key={index}>
                <div>
                  <input type="file" onChange={(e)=> handleImageChange(e,index)} multiple></input>
                  <img src={btn[index].imgUrl}/>
                </div>

                <div>
                  <input
                    placeholder='NAME'
                    value={btn[index].name}
                    onChange={(e)=> handleNameChange(index,e)}
                  />
                  <textarea
                    placeholder='INTORDUCE'
                    value={btn[index].page}
                    onChange={(e)=> handlePageChange(e,index)}
                  />

                </div>

                <div>
                  <input></input>
                  <input></input>
                  <input></input>
                </div>
              </div>
            )
          })
        }

      </div>
    </div>
  );
}

export default App;

主要看看input type=file；

上传主要通过onchange事件来接受e.target来接受上传的文件数据。

e.target.files据我摸索，上传的资源是在这的，当你设置了 multiple（选择多个文件）时，files会是一个数组来接受多个文件。

此函数可以帮助我们把e.target.files解码成base64格式，设置给img的src可以直接显示图片的，第一个参数是未解码的图片资源，第二个参数是一个匿名函数，reader.result作为匿名函数的参数传进来以后，匿名函数把这个参数设置给对象的imgUrl。

当上传的img的src为空时，会有白边：这样可以消除