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为空时,会有白边:这样可以消除