react上传图片base64格式

import React, { useState } from 'react'
import { useRef } from 'react'
import * as useComponent from "@/stores/modules/useComponent"
// 仓库插件
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/stores';
function Upload() {
        // 派发
    const dispatch = useDispatch()
    // 仓库数据
    const { canvasComponentList, currentComponent } = useSelector((state: RootState) => {
        return state.component
    })

     const box=useRef()
     const [arrImg,setArrImg]=useState([])
  const upload =(e)=>{
         const files=e.target.files
        const fileReader = new FileReader()
        for (let index = 0; index < files.length; index++) {
          const file = files[index]
          fileReader.readAsDataURL(file)
              fileReader.onload=()=>{
              
        setArrImg((prevImages) => [...prevImages, fileReader.result]);
      }          
        }  
  }
  
    // 开始拖拽触发
    const handleDragStart = (index: number) => {
        // 传递下标
        window.event.dataTransfer.setData('index', index)
        dispatch(useComponent.setIndex(index))
    }


  return (
    <div>
         <button onClick={()=>box.current.click()}>上传</button>
         <input style={{display:'none'}} type='file' ref={box} multiple  accept='image/*'  onChange={upload} />
         {
             arrImg && arrImg.map((x,index)=>{
                   return <img key={index} draggable={true}
                   onDragStart={() => handleDragStart(index)}
                   src={x} multiple alt="" style={{width:'100px'}} />
             })
         }
         {/* <img ref={imgs}   src="" alt="" /> */}
    </div>
  )
}

export default Upload

可上传一个或多个图片